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内 容 提 要 


本 书 是 界面 设计 领域 的 畅销 书 中 文 版 。 书 中 通过 30 多 个 故事 ， 曾 明了 如 何 
将 好 的 设计 原则 运用 到 实际 的 Web 应 用 程序 界面 中 ， 使 界面 引人入胜 ， 如 何 创 
造 完美 的 瞬间 ， 给 用 户 以 美好 的 体验 。 
本 书 适用 于 各 层次 Web 设计 人 员 和 开发 人 员 使 用 。 
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译 者 F 


随 着 Web 2.0 掀起 的 迅猛 风潮 ， 互 联网 在 今天 已 经 发 生 了 极 大 的 改 
变 。 旧 日 的 大 小 信息 网 站 有 如 昨日 黄花 ， 显 得 不 合 时 宜 ， 以 前 由 少数 
人 编辑 或 定制 内 容 的 互联 网 早已 变 得 更 为 开放 和 多 元 化 ， 以 前 的 “只 
读 式 互联 网 ” 变 成 了 “可 读 可 写 的 互联 网 ”。 我 们 身边 的 每 个 人 都 能 够 
为 其 添加 内 容 ， 贡 献 自己 的 力量 。 我 们 发 布 自 己 的 博客 ， 同 时 还 浏览 
其 他 人 的 博客 。 如 果 有 想 说 的 话 ， 我 们 还 会 发 表 评 论 或 回复 。 我们 为 
各 种 文章 标注 Tag 标签 进行 分 类 和 归 总 ， 婚 方便 了 自己 ， 又 方便 了 他 
人 。 我 们 点 击 查看 别人 的 照片 ， 同 时 也 上 传 自己 的 照片 。 我 们 订阅 各 
种 感 兴 趣 的 RSS。 我 们 使 用 Google 或 者 百度 就 好 像 在 图 书馆 里 自由 地 
检索 。 我 们 使 用 维基 百科 ， 而 且 只 要 愿意 也 有 自信 ， 还 可 以 为 其 添 砖 
加 瓦 。 我 们 在 今天 的 互联 网 上 学 习 新 技术 、 欣 赏 流 媒体 视频 、 交 流 读 
书 或 观 影 的 感想 、 结 交 和 披 此 倾 莫 的 朋友 。 这 是 一 个 史无前例 的 “共享 ” 
的 世界 。 


没 错 ， 史 无 前 例 。 在 这 个 也 许 几 年 前 根本 没 人 能 够 想象 的 平台 上 ， 作 为 
产品 开发 者 或 设计 者 的 我 们 ， 应 该 遵循 怎样 的 标准 才能 在 最 终 交 出 一 份 
完美 的 答卷 呢 ? 你 知道 ， 完 美的 答卷 就 意味 着 以 万 为 单位 的 点 击 量 、 良 
好 的 客户 口碑 ， 以 及 《最 重要 的 ) 丰厚 的 市 场 回 报 。 


我 想 你 已 经 知道 ，Web 2.0 的 主角 是 它 的 使 用 者 ， 也 就 是 我 们 所 说 的 用 
户 。 用 户 才 是 所 有 网 站 或 者 Web 应 用 的 评判 者 (当然 ， 也 是 财源 )。 用 
户 认为 我 们 提供 的 服务 物 有 所 值 ， 他 们 才 会 口 耳 相 传 ， 才 会 把 心得 写 到 
自己 的 博客 里 ， 才 会 像 苹果 教徒 "那样 成 为 你 的 拥护 者 。 用 户 从 不 会 手 拿 
标准 答案 来 为 我 们 的 产品 打分 ， 他 们 依据 的 是 自己 在 你 的 网 站 或 Web 应 
用 中 ， 每 一 次 发 出 指令 或 得 到 反馈 的 瞬间 体验 。 如 果 他 们 在 完成 任务 时 















































QD “苹果 教徒 ” 特 指 那 些 对 Apple 公司 具 极 高 品牌 忠诚 度 的 用 户 。 这 种 人 对 Apple 的 
产品 不 仅 只 是 单纯 地 使 用 ， 而 且 变 成 了 一 种 爱好 ， 其 激情 甚至 会 演变 为 着 魔 的 状 
态 。 表 现在 疯狂 搜集 相关 的 各 种 产品 、 纪 念 品 ， 在 新 产品 发 布 前 数 天 就 在 零售 店 前 
排队 ， 甚 至 用 Apple 公司 的 logo 进行 纹身 等 。 一 一 译 者 注 
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感觉 不 到 麻烦 ， 那 么 你 的 得 分 就 是 “良好 ”， 如 果 他 们 在 此 基础 上 还 能 感 
到 成 功 的 欣喜 或 者 操作 的 愉悦 ， 那 么 评分 就 是 “优秀 ”。 


所 以 这 本 书 开篇 的 第 一 句 话 就 是 : 
良好 的 用 户 体验 ， 全 在 于 那些 完美 的 瞬间 。 


Robert Hoekman, Jr. 是 一 名 交互 设计 师 和 易 用 性 专家 。 他 曾 任 职 于 
GoDaddy.com、Macromedia、Adobe 等 多 家 知名 公司 ， 现 在 有 了 自己 的 工 
作 室 Miskeeto， 一 直 致 力 于 为 广大 受众 提供 优质 的 用 户 体验 服务 。 之 前 
他 所 著 的 Designing the Obvious (国内 译 版 名 为 《一 目 了 然 》)) 直观 地 向 
我 们 阐述 了 如 何 构 建 简洁 易 用 的 软件 显 性 设计 方法 ， 而 这 次 他 又 带 着 本 
书 的 英文 版 Designing the Moment 再 次 揭示 关于 “瞬间 ”的 秘密 。 


用 户 身 处 我 们 的 网 站 或 Web 应 用 中 ， 由 始 至 终 要 经 历 一 系列 瞬间 。 不 
管 是 了 解 新 特性 、 注 册 账 户 、 评 论 及 评分 ， 还 是 搜索 信息 、 填 写 表单 或 
者 订阅 RSS， 甚 至 在 他 们 取消 账户 准备 一 去 不 返 的 那些 时 刻 ， 所 有 这 
些 形 成 一 个 又 一 个 瞬间 的 体验 。Robert 根据 自己 的 亲身 经 历 和 设计 经 
验 将 其 归结 为 30 多 个 故事 ， 基 本 上 涵盖 了 所 有 可 能 出 现 的 瞬间 。 每 一 
个 瞬间 就 是 一 个 故事 ， 每 一 个 故事 的 结尾 都 有 一 个 最 合适 的 解决 方案 。 
Robert 从 不 讲 大 道理 ， 他 给 我 们 的 是 最 简单 、 最 直接 的 礼物 一 一 如 果 
你 从 没 研究 过 用 户 体验 ， 遇 见 问题 时 按 他 说 的 方法 去 做 就 不 会 出 贫 子 ; 
如 果 你 算是 半 个 专家 ， 书 中 字里行间 流露 的 智慧 和 思考 方式 也 会 让 你 受 
益 菲 浅 。 


而 且 ， 我 们 很 高 兴 地 看 到 他 并 没有 刻意 地 美化 自己 ， 而 是 把 每 次 失败 后 
探索 并 改进 的 全 部 过 程 都 展现 出 来 ， 甚 至 还 有 如 何 “ 虽 入 ”其 他 优秀 设 
计 的 手段 。 首 先 ， 再 知名 的 设计 大 师 也 会 出 错 ; 其 次 ， 我 们 能 领悟 什么 
叫做 “借鉴 ”而 不 是 “抄袭 ”， 而 最 重要 的 ， 我 们 将 从 中 学 习 到 如 何 发 现 
设计 的 不 足 并 持续 改进 的 方法 。 


感谢 图 灵 公 司 对 我 的 邀请 ， 翻 译 这 本 书 的 过 程 也 可 以 说 是 一 次 学 习 的 
过 程 。 其 中 有 些 章节 所 讲述 的 内 容 直接 用 在 了 我 手头 的 项 目 中 。 而 且 
Robert 的 旁 征 博 引 也 让 我 开阔 了 眼界 ， 了 解 了 很 多 以 前 尚未 接触 的 东 
西 ， 而 它们 都 非常 有 意思 。 所 以 我 真 的 很 希望 你 们 都 能 读 到 它 ， 相 信 
你 们 会 和 我 一 样 ， 翻 完 最 后 一 页 时 将 切实 感受 到 自己 又 迈 上 了 一 级 新 
的 台阶 。 
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KAFR Xs 尽管 慎之 又 书 ， 译文 仍 难免 有 玻 漏 之 处 。 奶 请 大 家 指正 ， 
希望 大 家 共同 交流 进步 : messiah.book@gmail.com。 





向 怡 宁 
2008 年 11 月 于 北京 
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良好 的 用 户 体验 ， 全 在 于 那些 完美 的 瞬间 。 


在 第 一 个 瞬间 ， 也 就 是 当 一 位 用 户 从 Google 搜索 结果 页 面 跳 转 到 某 个 网 
站 的 时 候 ， 他 此 刻 可 能 是 想 看 看 这 个 网 站 的 名 字 及 其 功能 ， 而 下 一 个 瞬 
间 可 能 就 开始 琢磨 如 何 使 用 页 面 中 的 播放 器 来 观看 某 个 视频 介绍 。 再 然 
后 则 可 能 是 寻找 从 哪里 注册 ， 或 者 看 看 商品 是 否 打折 ， 或 者 尝试 联系 这 


个 公司 。 


很 多 设计 师 总 喜欢 从 “标准 用 户 “Persona)”( 即 针对 某 类 产品 设想 的 典 
型 用 户 ) 身上 捕 提 那些 一 般 性 意图 。 但 上 述 这 些 目标 不 能 算是 生活 体验 ， 
而 更 应 算 作 交互 式 体验 目标 。 

若 想 完成 优秀 的 设计 ， 我 们 就 需要 时 刻 自问 ， 在 这 个 瞬间 我 们 希望 用 户 
做 什么 ， 界面 应 该 如 何 鼓励 他 们 完成 这 个 任务 ? 

而 且 还 需要 考虑 这 位 用 户 在 此 刻 的 目标 是 什么 ? 我 们 的 设计 又 如 何 帮 助 
他 实现 他 的 目标 ? 他 的 目标 是 想 了 解 一 个 新 网 站 吗 ? 是 想 找到 某 些 具体 
的 信息 ? 是 想 填 一 个 表格 ? 还 是 想 往 购物 车 里 面 塞 点 什么 ? 

每 一 个 瞬间 都 有 可 能 加 强 也 可 能 摧毁 用 户 对 某 个 产品 或 公司 的 信心 。 每 
一 个 瞬间 对 于 完整 的 用 户 体验 来 说 ， 都 是 不 可 或 缺 的 一 部 分 。 

何 出 此 言 ? 因为 每 个 人 在 每 个 时 刻 所 要 完成 的 任务 ， 对 于 此 时 的 他 而 言 ， 
那 就 是 最 重要 的 任务 。 

确保 每 时 每 刻 都 完美 ， 这 是 设计 师 的 职责 。 要 确保 我 们 的 用 户 在 这 个 瞬 
间 心 情 愉 快 ， 效 率 很 高 ， 从 而 自我 感觉 得 心 应 手 。 
我 们 的 工作 就 是 考虑 所 有 这 些 瞬 间 一 一 设计 一 些 东 西 来 支持 用 户 达 成 每 
一 个 目标 ， 而 不 会 干扰 或 者 妨碍 他 们 。 同 时 ， 把 这 些 完全 不 同 的 部 分 效 
聚 为 一 个 整体 。 

我 们 的 工作 不 是 设计 花哨 的 屏幕 ， 而 是 要 设计 美好 的 瞬间 。 





































































































无 论 是 简单 还 是 复杂 的 应 用 都 是 如 此 。 最 重要 的 是 ， 当 用 户 想 要 达到 其 
交互 目标 的 种 种 时 刻 ， 都 会 发 生 些 什么 。 


要 实现 优秀 设计 的 关键 之 一 ， 就 在 于 了 解 每 一 个 瞬间 需要 发 生 一 些 什么 
才能 完美 。 而 我 们 就 应 该 去 实现 它们 。 


CC 为 瞬间 而 导航 


在 每 一 个 瞬间 ， 用 户 都 将 发 出 各 种 各 样 的 行为 。 他 们 在 一 天 之 内 可 以 
从 Amazon 游民 到 Z Gallerie"， 然 后 可 能 做 出 从 注册 到 退出 之 间 的 任 
何事 情 。 


用 户 在 互联 网 上 的 行为 多 种 多 样 ， 有 输入 ， 有 编辑 ， 有 搜索 ， 有 调整 版 
面 ， 有 创建 ， 有 上 传 ， 有 删除 ， 有 共享 ， 有 组 织 ， 有 参与 。 这 些 都 是 设计 
师 希 望 用 户 进行 的 行为 。 在 大 多 数 情 况 下 ， 这 也 是 用 户 正 想 要 做 的 行为 。 


当然 ， 我 们 也 会 做 一 些 通常 自己 并 不 会 意识 到 的 事情 。 我 们 分 析 ， 我 们 
判断 ， 我 们 遗忘 、 犯 错误 、 走 神 、 改 变 主意 、 迷 失 方 向 、 感 到 困扰 。 而 
如 果 幸 运 的 话 ， 我 们 会 学 到 东西 ， 得 到 指引 。 我 们 会 有 新 的 想法 、 形 成 
记忆 、 熟 悉 、 信 任 、 灵 感 乍 现 ， 并 且 觉 得 自己 的 工作 富有 成 效 。 


正 是 这 些 行 为 才 让 我 们 成 为 活生生 的 人 。 这 本 书 就 是 要 讨论 如 何 设计 那 
些 文 持 所 有 此 类 行为 的 界面 一 一 在 用 户 需 要 进行 选择 的 那些 瞬间 ， 帮 助 
他 们 做 出 正确 的 决定 。 我 们 将 讨论 创建 怎样 的 交互 行为 以 鼓励 人 们 输入 、 
编辑 、 搜 索 和 共享 ， 激 励 他 们 完成 所 有 我 们 希望 他 们 做 的 事 。 我 们 还 将 
讨论 如 何 设计 各 种 手段 ， 来 帮助 人 们 提升 工作 效率 一 一 即使 他 们 天 生态 
性 大 、 老 出 错 ， 或 者 总 是 三 心 二 意 。 


更 确切 地 说 ， 这 本 书 收集 了 30 多 个 故事 ， 阐 明了 如 何 将 好 的 设计 原则 运 
用 到 实际 的 Web 应 用 程序 界面 中 去 ， 使 界面 引人入胜 ， 呼 之 欲 出 。 自 始 
至 终 ， 这 些 故事 都 将 以 批判 的 眼光 来 看 待 设计 ， 并 且 详 完 每 一 个 细节 ， 
力求 确保 人 类 一 一 这 种 时 常 犯错 而 又 行事 乖 张 的 生物 一 一 能 不 受 软 件 产 
品 的 限制 ， 而 又 自我 感觉 良好 。 


要 设计 美好 的 瞬间 ， 就 需要 做 到 以 下 几 点 。 






























































QZ Gallerie 是 一 个 主 营 家 居 装 饰 的 国际 电子 商务 网 站 。 网 址 为 www.zgallerie.com/。 
此 处 作者 意 指 用 户 从 A 得 到 Z。 一 一 译 者 注 
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B 介绍 一 种 具 启 迪 意 义 并 且 富 有 洞察 力 的 界面 设计 方法 ， 我 称 之 为 
“大 声 想 出 来 ”; 

m 以 批判 的 眼光 遍 查 用 户 与 Web 应 用 交互 的 每 一 个 阶段 中 的 每 一 个 
元 素 ， 一 次 就 看 一 个 瞬间 ， 

E 为 所 有 的 设计 一 一 从 页 面 布局 到 在 线 社区 一 一 推荐 一 整套 最 优 
方案 。 


最 重要 的 是 ， 本 书 探究 了 界面 的 种 种 微妙 细节 ， 它 们 在 用 户 使 用 的 每 一 
个 瞬间 如 何 改 善 或 是 破坏 用 户 的 体验 ， 进 而 探讨 了 应 该 如 何 对 每 一 个 细 
节 加 以 改进 。 


交互 的 设计 
本 书 的 结构 框架 遵循 了 用 户 进行 Web 应 用 操作 时 的 典型 步 又 ， 也 就 是 从 
一 开始 最 关键 的 “第 一 印象 ” 一 直到 最 后 他 们 退出 并 转向 别处 。 每 个 部 


分 的 标题 直接 与 这 些 行为 相关 ， 每 部 分 都 讲解 在 这 一 个 瞬间 用 户 实 实在 
在 要 做 的 事情 。 


第 一 部 分 到 第 三 部 分 讲述 的 是 当 用 户 打开 一 个 新 网 页 后 在 头 30 秒 钟 内 
所 要 做 的 事情 。 这 些 章节 里 面 的 故事 描述 了 他 们 首次 了 解 界 面 、 探 寻 方 
向 、 略 读 文 本 熟悉 更 多 情况 、 观 看 视频 和 动画 演示 ， 以 及 搜索 详细 信息 
等 情形 。 


第 四 部 分 到 第 六 部 分 则 是 关于 用 户 在 深入 我 们 的 网 站 时 所 做 的 事 。 一 旦 
他 们 决定 要 创建 自己 的 账号 ， 就 会 输入 信息 、 编 辑 内 容 、 管 理 数据 ， 以 
及 通过 种 种 方式 与 网 站 进行 交互 。 在 这 个 过 程 中 ， 每 一 个 瞬间 都 有 可 能 
持久 地 影响 他 们 对 网 站 的 信心 和 好 感 。 


第 七 部 分 则 关注 当 用 户 离开 网 站 
时 所 要 发 生 的 事情 。 


换 名 话说， 我 有 意 地 将 这 整 本 书 的 结构 做 如 此 安排 。 其 目的 是 使 它 能 
现 出 当 用 户 面 对 Web 应 用 时 由 始 至 终 的 所 有 细节 。 我 们 将 详细 地 探讨 人 
机 对 话 中 的 每 一 个 阶段 ， 不 管 它 是 只 有 3 秒 钟 还 是 将 会 持续 两 年 。 如 果 
用 一 句 话 来 概括 ， 那 就 是 在 这 些 故事 中 所 讨论 的 元 素 将 会 宫 括 在 线 用 户 
体验 的 完整 情境 。 
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不 管 是 暂时 离开 还 是 永久 离开 一 一 
































这 样 的 顺序 安排 也 方便 你 在 日 后 能 够 随时 翻阅 ， 把 这 本 书 当 作 某 种 “ 灵 
感 参考 指南 ”来 使 用 。 如 果 你 在 大 半年 后 为 了 某 个 编辑 功能 的 设计 而 一 
筹 莫 展 ， 可 以 打开 书 里 相应 的 章节 第 五 部 分 ) 读 几 页 ， 很 有 可 能 会 得 
到 不 少 启发 。 


而 这 些 都 是 源 于 “ 讲 故 事 ”这 种 永 不 过 时 的 艺术 。 
来 自 真 实 世界 的 问候 


在 这 些 故事 里 ， 有 一 些 讲述 了 如 何 贯彻 和 实施 那些 常见 的 设计 原则 ， 还 
有 些 则 会 探讨 你 可 能 从 未 遇见 过 的 个 别 情况 。 有 一 些 故 事 提 出 了 新 的 见 
解 和 看 法 ， 还 有 些 则 似乎 是 老生 常 谈 。 不 论 怎样 ， 它 们 存在 的 目的 都 是 
为 了 启发 你 的 思维 ， 揭 示 各 种 事实 和 发 现 ， 提 出 理论 培养 直觉 ， 最 终 让 
你 能 设计 出 各 个 伟大 的 瞬间 。 


在 Designing the Obvious (之 前 我 写 的 一 本 书 ) "中 ， 我 详细 地 阐述 了 关 
于 Web 应 用 设计 的 七 个 核心 原则 。 在 此 基础 上 形成 了 一 套 通 用 的 方式 方 
法 ， 能 够 举一反三 、 成 功 地 应 用 到 任何 Web 项 目 中 去 。 


而 在 本 书 中 ， 我 用 一 系列 故事 来 演示 我 是 如 何 把 这 些 想法 和 观点 应 用 到 
实际 项 目 中 的 ， 从 而 为 用 户 创 造 出 令 其 印象 深刻 的 瞬间 。 与 此 同时 ， 我 
还 继续 提出 了 大 量 新 的 想法 和 观点 。 

这 些 故 事 有 些 是 我 的 亲身 体验 ， 是 我 日 常 在 进行 设计 时 碰 到 的 问题 ， 而 
有 些 则 是 全 新 的 故事 ， 是 我 专门 为 了 本 书 而 设计 的 。 

所 有 的 故事 都 直接 源 自 那些 痴迷 于 几乎 任何 交互 式 设 计 的 设计 师 们 头脑 
中 的 想法 。 他 们 当中 有 些 人 在 深夜 辑 转 反 侧 地 思索 当地 的 快餐 厅 应 当 如 
何 摆 放 饮料 机 才能 方便 消费 者 ， 还 有 些 人 则 花费 大 量 时间 撕 摩 那些 获取 
用 户 体验 的 各 种 瞬间 ， 想 方 设法 地 加 以 改进 。 

大 声 地 做 出 决定 


在 Designing the Obvious 的 末尾 ， 我 谈 到 了 勇敢 做 出 决定 的 重要 性 np 
怕 明 知 这 些 决 定 在 以 后 肯定 会 改变 。 不 论 决定 的 有 效 性 能 持续 多 长 时 间 ， 































































































(D Designing the Obvious 由 New Riders 出 版 社 于 2006 年 10 月 出 版 。 网 址 为 http:// 
rhjr.net/dto/。 该 书 的 中 文 版 由 机 械 工 业 出 版 社 于 2008 年 1 月 出 版 ， 书 名 《一 目 了 
然 》。 译 者 注 



































前 z 5 


都 必须 做 出 决定 ， 使 这 个 设计 中 的 所 有 地 方 都 按 此 决定 来 考虑 ， 并 且 有 
意 为 之 。 决 不 能 听天由命 。 


在 本 书 中 ， 我 尝试 做 一 些 之 前 从 没 做 过 的 事情 : 把 做 出 那些 决定 的 详细 
过 程 全 部 揭晓 并 且 逐 步 剖 析 给 大 家 。 


我 希望 能 揭示 出 “持续 改进 ”这 一 设计 方法 的 重要 性 。 我 将 向 你 们 展示 
绝对 需要 采用 迭代 的 方法 才能 达到 好 的 结果 。 我 将 向 你 们 展示 如 何 应 用 
设计 原则 、 探 索 、 经 验 、 直 觉 其 至 感觉 来 指导 设计 过 程 。 


换 名 话说， 我 大 声 地 做 出 所 有 决定 。 


我 承认 自己 犯 过 错误 ， 也 从 其 他 人 那里 学 到 很 多 ， 我 向 你 们 展示 好 的 设 
计 其 实 是 一 大 堆 差 的 设计 最 终 进化 的 结果 。 希 望 通过 这 样 做 ， 你 们 将 发 
现 好 的 设计 绝 不 是 单纯 因为 天 才 的 创意 或 者 灵感 爆发 的 一 瞬间 而 产生 的 ， 
它 是 持续 前 进 的 永恒 动力 所 造就 的 产物 。 


多 年 之 后 你 也 可 以 重新 翻阅 这 本 书 ， 并 且 质 疑 我 所 做 的 这 些 决定 。 可 能 
那 时 你 会 发 现 我 在 这 里 所 说 的 一 切 对 你 来 说 都 幼稚 得 可 笑 ， 而 自己 早已 
经 超越 了 我 所 在 的 高 度 。 让 这 一 切 在 你 身上 发 生 ， 是 我 最 大 的 心愿 。 


我 把 自己 敞开 给 你 ， 是 希望 能 帮助 你 学 习 “ 如 何 质 疑 自 己 ”: 在 每 一 个 设 
计 中 找到 缺点 ， 并 且 不 断 地 寻找 方案 来 改进 它 。 


开始 交流 


这 本 书 决 不 是 一 本 所 谓 Web 界面 的 权威 性 指南 读物 。 它 只 是 一 个 交流 的 
开始 ， 其 目的 是 让 你 思考 。 


书 里 所 说 的 都 不 是 什么 权威 或 者 官方 的 答案 ， 因 为 本 来 就 没有 什么 权威 
或 者 官方 的 答案 。 当 我 向 你 具体 推荐 什么 的 时 候 ， 那 只 是 基于 我 自身 的 
经 验 、 观 点 和 认识 。 其 至 有 时 候 ， 它 们 仪 仅 只 是 基于 我 的 直觉 (直觉 是 
每 一 位 设计 师 都 应 当 具 有 并 且 相 信 的 东西 )。 

因此 ， 我 几乎 可 以 保证 ， 你 将 会 发 现 某 些 地 方 你 能 做 得 更 好 一 一 你 肯定 
会 找到 一 些 我 没 想到 的 办 法 来 让 你 的 用 户 拥有 更 美好 的 瞬间 。 如 果 你 做 
到 了 ， 我 希望 你 说 出 来 。 不 要 做 一 个 整 天 身 在 靠背 椅 里 面 的 设计 师 
走出 去 ， 告 诉 人 们 你 所 做 的 改进 。 


把 你 的 意见 和 想法 发 邮件 告诉 我 。 把 它们 放 在 你 的 博客 里 面 去 。 把 它们 
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告诉 你 的 朋友 。 最 好 也 告诉 你 的 同事 ， 还 有 你 的 老板 。 

我 从 不 认为 自己 是 这 个 星球 上 知识 最 渊博 的 设计 师 ， 也 从 没 相信 过 自己 
做 的 一 切 都 是 金 科 玉 律 。 一 直 以 来 我 都 是 从 其 他 人 身上 学 习 并 获得 灵感 。 
通过 这 本 书 ， 我 希望 向 你 传授 知识 并 激发 你 的 灵感 ， 但 同时 也 强烈 地 相 
信和 希望， 最 终 你 也 能 像 我 一 样 地 传授 给 其 他 人 。 


如 果 你 有 什么 好 的 想法 和 意见 ， 请 告诉 大 家 。 让 交流 继续 。 


即使 已 经 尽 了 最 大 的 努力 ， 仍 然 是 没有 最 好 ， 只 有 更 好 。 书 中 提 到 的 这 
些 设计 我 已 经 尽 了 自己 最 大 的 努力 ， 但 如 果 你 发 现 有 什么 方法 能 更 进 一 
步 ， 请 大 声 地 告诉 大 家 ! 


C 因此 你 也 不 必 做 笔记 


输入 在 书 里 找到 的 那些 URL 网 址 链接 真 的 是 一 件 非常 繁琐 的 事 。 你 需要 
一 个 字母 一 个 字母 地 边 看 边 输入 。 为 了 避免 这 个 讨厌 的 过 程 ， 我 为 书 里 
面 出 现 的 所 有 网 站 、Web 应 用 程序 、 博 客 回复 、 文 章 、 研 究 论文 和 其 他 
参考 资料 创建 了 一 个 存档 。 在 书 里 你 不 会 看 到 一 个 URL 网 址 链接 "。 如 
果 你 想 在 那里 进行 深入 研究， 请 访问 网 站 https://rhoekmanjr.backpackit. 
com/pub/1828580-designing-the-moment-links-from-the-book， 点击 “Links 
from the book” 链 接 。 


不 需要 再 吃 嗪 什么 了 ， 让 我 们 开始 吧 。 
















































































中 为 了 便于 读者 查阅 ， 本 书 以 脚注 形式 给 出 了 所 有 引用 的 链接 地 址 。 一 一 译 者 注 


第 5 章 


第 6 章 
6.1 
6.2 

第 7 章 
7.1 

第 8 章 
8.1 


目 X 


第 一 部 分 “指引 用 户 











令 人 心动 的 第 一 印象 UTILI INL IL ITI 5 
EILA EE ÜÉ 4 
引导 用 户 的 视线 VENIENS XX» ex v Ou veau Quee us due uou es qo ver ves VON dux da eS sae N Vo Res ds ves ves veu dV Nx SES 11 
12.1 应 用 十 腾 堡 图 表 ER RE ON ORR NO A | 11 
1.2.2 使 用 颜色 来 吸引 注意 a 15 
凸显 个 性 ——————————— 47 
统一 设计 风格 ， 形成 积极 的 印象 EE TTE 19 
导航 之 道 PT E T 26 
告诉 软件 该 做 什么 VPOP PEIPER pe ep sU PO De TIE RUE 27 
3.1.1 每 个 人 都 想 当 指 挥 TUERI 29 
3.1.2 避免 Login 综合 症 TT AT TTE 31 
3.1.3 我 来 说 ， 你 来 做 TT r T EEE 33 
链接 生来 不 平等 er E E E E 34 
让 环境 提示 成 为 引导 的 线索 和 36 
标签 云 里 抬头 看 路 EE AA 40 
你 的 创新 是 否 有 效 二 42 
5.1.1 什么 时 候 该 说 不 … CTT 43 
5.1.2. d X AMOR ÁREA mM RA emen nn 45 
第 二 部 分 学 J 
开门 见 山 E saxa i dorisoPii T PAS lrserURD IP SP Pit ETT 49 
AMT AA EG SEE 用 ————————— —— — 49 
为 扫描 而 设计 OE dA 51 
为 界面 做 标记 DONE EEUU ADITU LI ITI I 55 
停 止 标记 你 的 “ 假设 全 生生 生生 56 
生动 传神 的 视频 ANTE UE ILLI ILI 59 
视频 演示 胜 过 千言 万 语 WA 60 


8.1.1 使 用 视频 来 表述 问题 ———— M—À—— M —— A T 61 


2 H 
8.2 
第 9 章 
9.1 
第 10 章 
10.1 
第 11 章 
11.1 
第 12 章 
12.1 
第 13 章 
13.1 
13.2 
第 14 章 
14.1 
第 15 章 
15.1 
第 16 章 
16.1 
第 17 章 
17.1 





















































录 
8.1.2 使 用 视频 来 表述 想法 TREE DET CL CUIU 62 
极为 简单 的 视频 演示 艺术 SN 63 
第 三 部 分 搜 R 
提出 搜索 词 建 议 a i Ee 67 
is j] Poka-yoke 机 制 |， 使 用 自 动 完成 输入 框 CE 68 
9.1.1 局 限 性 ET ERR VS DENS RASEN RES Ne EAR PR OEYR VET PAR EREP AE SRUS RURSUS Ee PAR FASSUS GERRER TURO RES 70 
9.1.2 好 十 知 时节 PET ETE ELTE EO ERE DD ECCLE 72 
Lut pcr p RR — 73 
信赖 那些 行 之 有 效 的 标准 1 74 
es lr a D LC 78 
高 级 搜索 也 简洁 SES SER RR URS ERE UR UR ERR AER SNR ERR VRR RENE VERRE REUS EVER RARE SER POSER RR ESPERE SEV ERR aue US 80 
11.1.1 ibutug Visas ERR ERR RERRER ARR SERRA RARE TERRE EREPER USE RRTERE RO Ea EROR SERRE RS ERR MER URE RS EE 81 
11.1.2 引人入胜 的 交互 RE RE RA audes ove eds a dud dan duca Rua 82 
第 四 部 分 RO A 
视频 播放 器 的 标准 化 PT A S E E E T E E E E 87 
拨 开 VCR 设计 的 迷雾 SR 87 
12.1.1 且慢 一 一 还 有 做 得 更 好 的 "E 92 
12.1.2 博采众长 PEPE PEPE OP PEES AI IE P Y OOP IAS PT E E 94 
巩固 你 的 表单 布局 ER 97 
设计 出 行云流水 般 的 表单 Ep A E E OTE AE 98 
证 “确定 /取消 » 更 完美 "PAP RIO EI I IQ I C 101 
13.2.1 首选 处 理 方 式 和 第 二 处 理 方式 二 102 
13.2.2 这 很 重要 TT MER STAR ERV ER REESE SET SEE 104 
驾驭 Wizard 向 导 T———————————— n 105 
建立 清晰 的 预期 e 105 
最 后 的 一 英里 : 即时 校 验 i 111 
要 纠 错 ， 出 要 赞扬 所 的 RS 区 拓扑 后 网 113 
简化 长 表单 PT PP 120 
清晰 的 预期 ———Á————— ——————Ár— T 121 
让 他 们 登录 STR UN ILI II I I. 126 
再 一 次 改进 标准 DONE TIL DIDIT III IO 127 


17.1.1 网 络 用 户 名 与 用 户 姓 名 PPT deesse uae desvas 和 ausus ce ode) ex Pe ETE 127 


第 18 章 
18.1 


第 19 章 
19.1 


第 20 章 
20.1 


第 21 章 
21.1 
第 22 章 
22.1 


第 23 章 


23.1 


第 24 章 
24.1 


第 25 章 
25.1 





17.1.2 更 上 一 层 楼 Wsxesadsesesvac enu enses ks se aue es eas seus dde vere espe Ness xesussceveP eese urn aV 128 
计算 字符 数 tex dt eade iater vit der iuntuvo Pede Rb vex Ax vE all iX vb ue Pado A Ts 131 
到 达 限 制 TTD 132 
18.1.1 编辑 中 的 poka-yoke :*eeennennenennnnennn nnne nnne ntes 134 
18.1.2 一 点 小 警告 生生 全 全 各 全 136 


第 五 部 分 参 与 














创建 个 人 资料 ee HH Hee 139 
递 进 地 增加 T I r E E 140 
19.1.1 Je ERARA r E 141 
19.1.2 空白 资料 页 面 EC UT MM 143 
编辑 i E E E T 144 
在 正确 的 时 间 显 示 正 确 的 工具 BAUR a NORRIS CAR EOR EST PEE ERR RAPERE RESERVE EUN UNT 146 
20.1.1 把 高 级 的 玩意 藏 起 来 和 148 
20.1.2 打扫 干净 SISVRR NS VANS IRAE REAREERRARA RR RORREIR T RELEERR 和 二 二 150 
开展 社交 活动 和 151 
朋友 与 随员 BR aa RENTRER TR RRS EU QUR TUS RAPERE E TEVEIS NARRA RA | 152 
显而易见 的 博客 OE A EN NHEEDUN NN EUER 156 
通 往 更 好 的 博客 的 三 条 路 人 157 
22.1.1 解决 方案 Wess e ravue n VANVIM TT VENVANTAVUENI A TES NAR TASA S SERRA VERS CHRUEASMEERE 158 
22.1.2” 别 跟着 傻瓜 上 路 eee eene 163 
邀请 讨论 er A 164 
让 你 的 顾客 发 表意 见 TT URSUS SERRE ASA R SERIE E EQES TER UR PUS UP ERI UEE TAS ARR REPAS REDE 164 
23.1.1 一 个 关于 信任 的 问题 ee 165 
23.1.2 起 用 你 的 Otaku mmm emen eene 166 
23.1.3 标记 那些 来 犯 者 ETT 168 
23.1.4 为 他 们 让 路 PTO POO ET PE das qUsdeo aS o TES SA Ra ada era a saao ee uso ados uE 168 
得 到 一 个 好 的 评分 BREAREXSÉN HANE NAR EDU NAAR EANE KR EDDA EO A RI EE a D Vd 169 
清晰 胜 于 效率 TTE SEE IIIS COD CIL C 170 
第 六 部 分 “管理 信息 
让 RSS 更 有 意义 dapoi ttd egent ados te vd UAE Ue Re pir essi Aes Sx PERPE TER 175 


人 破译 其 他 选择 ER 177 





4 H 
第 26 € 
26.1 
第 27 章 
27.1 
第 28 章 
28.1 
28.2 
第 20 章 
29.1 
29.2 
第 30 章 
30.1 
第 31 章 
31.1 


录 


自 定义 标签 Dd III SI 181 
分 类 系统 、 分 众 分 类 系统 以 及 变异 体 T ——— — —— T 183 









26.1.1 消除 语言 障碍 生生 和 机 全 183 
26.1.2. DI: II 184 
26.1.3 提出 建议 Vs eue o TT ERRARE RR REEENE S ERRRR AERE oso ERES PRUER ERR PAESE UER 184 
26.1.4 搜索 ， 搜索 ， 再 搜索 TP NE RAS SNR S SERES ESSRASRS SS RAN SS SERES ER ESTNE USESSRS 185 
26.1.5 B 定义 标签 的 未 来 OR RT 186 
通过 拖 放 来 组 织 信息 MUI UE EIE EL E YI LE S IE 187 
AE M) RB memet 187 
AMNES v atr 187 
DAVE | | u——X———— 188 
D AA e RAE E MEE: 190 
27.1.4 完成 的 感觉 —— M —————— M 191 
271.1.5 判断 你 的 功能 是 否 正当 和 192 
用 系统 通知 来 管理 中 断 ERRAT TE MSN En EREEUDN FOLE UDCP EUN GNE Kr iFa d 194 
为 改变 而 设计 MOTOS TERRE PAEAN SEO EAEE CA NSAR ENNEA I SECESE 195 
界面 元 素 的 再 利用 资源 TT 198 
第 七 部 分 B F 

退出 E E E DM EE DO IL EAE IEEE I EE ELICIT TEN 203 
化 简 为 繁 和 203 
动员 用 户 返 回 和 205 
292. XAA emen nem ene eee eee 206 
PELIS M ——— € 207 
抹 去 那些 尘封 的 用 户 a E E E 208 
DISP O 209 
30.1.1 人 性 化 沟通 和 210 
人 211 
30.1.3 IFIERGPULE 2 —— 212 
30.1.4 RARI ib Kennen 213 
Fa (tb I] RBB eeeeeeeÁÁÁMMÓAMÁÁeRIAÁÁMMMeBeHeHeee 

优雅 地 失败 TT nes esq do axeacssdus dus dos suus uso sa ones aus oco duo dada 

31.1.1 E a E e 


31.1.2 B Ap (也 许 ) 并 未 失去 





ea e T A 


第 一 部 分 


C 第 1 章 
o 第 2 章 
C 第 3 章 
C 第 4 章 
C 第 5 章 


iH 5| A P 





邻 人 心动 的 第 一 印象 .pp 3 
凸显 个 性 eeeeeeeerrreerrrrrrrrerrrerrrererneeee 17 
(= a E 26 
Ge a E N Ae 34 


标签 云 里 抬头 看 路 和 40 


2 ”第 一 部 分 指引 用 户 





在 互联 网 上 探索 ， 毫 无 浪漫 可 言 。 我 们 不 是 Lewis 和 Clark ， 把 自己 的 
所 有 家 当 打 完 包 然 后 一 头 扎 和 人 西部 去 发 现 美国 未 知 的 领土 。 不 要 幻想 在 
网 络 中 能 找到 什么 尘封 的 宝藏 。 而 且 除了 经 常 使 用 的 Google 和 电子 邮件 
之 外 ， 你 的 大 胆 探 索 一 般 来 说 也 不 会 获得 什么 丰厚 的 回报 。 


探索 万 维 网 通常 都 带 有 一 定 的 功利 心 ， 就 好 像 你 第 一 次 光临 茶 家 新 店铺 
一 样 。 尽 管 曾 经 逛 过 上 千家 店铺 ， 但 是 我 们 仍然 会 觉得 新 店铺 和 之 前 的 
那些 有 所 区 别 ， 因 此 我 们 需要 先 熟悉 熟悉 这 个 新 的 环境 。 


与 此 相似 ， 当 我 们 面 对 一 个 并 不 熟悉 的 网 页 时 ， 通 常 都 会 完 扫 视 一 下 整 
个 页 面 ， 试 图 了 解 这 个 网 站 大 概 的 用 途 ， 然 后 再 决定 自己 是 和 否 应 该 更 深 
入 地 浏览 ， 点 开 网 站 其 他 的 页 面 去 四 处 逛 逛 。 


这 样 一 个 “着 陆 ” 的 过 程 ， 对 于 树立 用 户 对 网 站 的 信心 以 及 引导 用 户 进 
行 深入 探索 ， 是 非常 重要 的 。 


那么 ， 作 为 Web 设计 师 ， 我 们 的 工作 就 是 要 帮助 用 户 “ 着 陆 ” 而 且 越 
快 越 好 。 出 于 这 个 原因 ， 本 书 最 开始 几 音 首先 讨论 用 户 第 一 次 访问 某 个 
站 点 的 头 30 秒 钟 内 将 会 发 生 的 事情 。 


在 这 片刻 之 内 ， 我 们 需要 完成 以 下 几 件 事 : 


国 设计 吸引 人 的 第 一 印象 ; 
m 以 明确 的 路 线 来 提供 信息 ; 
B 提供 工具 指引 用 户 
B 把 观光 客 转变 为 消费 者 。 
所 以 在 头 几 个 故事 中 ， 我 们 将 巡视 从 页 面 布 局 到 导航 、 从 搜索 结果 到 视 


频 演 示 的 方方面面 ， 来 看 看 所 有 这 些 元 素 究竟 如 何 帮助 我 们 达到 目的 ， 
同时 让 用 户 尽 快 地 适应 我 们 的 网 页 。 


















































(D Lewis 和 Clark 是 美国 探险 家 。 他 们 于 19 世纪 初 进行 了 历时 三 年 的 “Lewis 和 Clark 
探险 ”(Lewis & Clark Expedition )， 深 入 西部 荒野 。 这 也 是 美国 人 第 一 次 横路 北美 
大 陆 ， 在 美国 西部 开发 史上 意义 深远 。 一 一 译 者 注 





























第 1 章 
令 人 心动 的 第 一 印象 





人 们 常 说 第 一 印象 往往 会 给 人 留 下 一 生 的 记忆 。 对 于 一 个 网 站 而 言 ， 这 
一 说 法 也 同样 成 立 。 但 遗憾 的 是 注意 到 这 一 点 的 站 点 并 不 是 很 多 。 


有 人 说 Steve Jobs， 这 位 Apple 公司 无 戎 的 领导 者 ， 对 第 一 印象 非常 执 
著 。 也 许 这 可 以 解释 为 什么 Apple 公司 的 产品 总 能 在 第 一 时 间 就 吸引 
人 们 的 眼球 。 


哪怕 是 打开 一 台 还 在 包装 盒 里 的 轿 新 的 MacBook Pro， 就 足以 让 人 流 口 
水 。 首 先 ， 单 爷 外 包装 就 令 人 满怀 期 望 和 惊 言 。 而 一 旦 打开 包装 盒 ， 将 
MacBook 安置 在 书 昌 上 ， 它 的 启动 过 程 从 第 一 个 瞬间 开始 就 极 富 魅 力 。 
伴随 着 棚 棚 如 生 的 动画 ， 它 用 多 种 语言 向 你 表示 欢迎 ， 会 自动 搜索 网 络 
连接 ， 提 示 你 把 之 前 Mac 电脑 中 所 有 的 数据 和 存档 备份 到 新 电脑 中 来 ， 
还 让 你 在 一 片 端庄 雅致 的 桌面 背景 之 上 进行 设置 ， 一 切 都 为 用 户 考虑 得 
细致 入 微 ， 让 这 整个 过 程 毫 不 费力 。 

要 把 这 一 切 搬 到 互联 网 上 则 并 不 容易 。 不 过 ， 设 计 一 个 引 人 注 目 、 令 人 
动心 的 页 面 仍然 是 我 们 工作 中 不 可 缺少 的 一 部 分 。 


前 不 久 有 一 位 客户 来 找 我 ， 带 着 一 大 堆 关 于 首页 设计 的 需求 。 他 在 设计 
一 个 专门 面向 平面 设计 师 的 社区 网 站 。 他 已 经 完成 了 一 项 困难 的 工作 ， 
就 是 精简 了 需求 列表 ， 只 保留 了 那些 真正 有 用 、 确 实 与 网 站 用 户 相 关 的 
部 分 。 而 我 所 要 做 的 就 是 把 这 份 列表 转变 成 美好 的 第 一 印象 。 

由 于 这 个 网 站 主要 针对 平面 设计 师 ， 因 此 它 的 首页 需要 一 个 中 心 区 域 突 
出 展示 大 量 富 有 特色 的 图 片 ， 同 时 还 需要 一 些小 区 域 来 安排 用 户 的 账号 
信息 、 网 站 特色 项 目 以 及 登录 框 。 当 然 ， 页 面 中 还 需要 包括 那些 常见 元 
素 ， 如 网 站 lo0go、 欢 迎 秤 、 导 航 栏 、 搜 索 框 以 及 页 脚 信 息 等 。 


另外 ， 就 算 这 些 相对 来 说 尚 可 应 付 ， 网 站 首页 还 需要 放置 一 些 关于 业界 
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4 第 1 章 令 人 心动 的 第 一 印象 
和 站 点 本 身 的 头条 新 闻 以 及 摘录 片段 。 


仅 展示 图 片 一 项 就 将 占据 很 大 一 块 的 页 面 空间 。 要 将 其 他 所 有 栏目 都 加 
进来 ， 同 时 还 要 包括 新 闻 区 域 ， 就 显得 有 些 环 手 了 。 别 忘 了 ， 即 使 首页 
的 所 有 这 些 部 分 都 能 完美 地 展现 ， 能 让 用 户 得 到 他 们 想 要 的 东西 ， 但 毕 
况 这 个 站 点 主要 的 业务 目的 是 吸引 浏览 者 们 注册 并 成 为 该 社区 的 成 员 。 
因此 我 需要 一 种 设计 诱 使 用 户 注意 到 Sign Up Now 现 在 就 注册 〉 按钮 ， 
同时 让 他 们 想 要 去 单 击 它 。 


C1.1 发 现 页 面 布 局 


我 一 开始 努力 尝试 去 发 现 页 面 的 布局 。 对 于 页 面 设 计 而 言 ， 布 局 是 其 中 
最 基础 的 元 素 。 


我 在 这 里 用 到 了 “发 现 ” 这 个 词 ， 因 为 页 面 的 布局 设计 并 不 一 定 出 自 于 
设计 师 本 号。 当 我 想到 页 面 布局 的 时 候 ， 经 常会 联想 到 Bob Ross。 这 个 
画家 最 让 人 津津 乐 道 的 一 点 ， 就 是 他 能 将 随意 酒 到 画布 上 的 颜料 加 工 成 
一 副 满 是 “快乐 的 树 ” 的 风景 画 "。 他 总 是 根据 绘图 的 进展 随机 应 变 ， 决 
定 下 一 步 该 做 什么 。 

明白 了 吧 ， 不 是 你 选择 页 面 布局 ， 而 是 它 选择 了 你 。 

布局 是 内 容 组 织 的 必然 结果 ， 它 往往 是 自己 逐渐 成 形 的 。 一 旦 周全 考虑 了 
页 面 的 所 有 需求 ， 并 且 确 定 了 每 一 块 的 内 容 ， 你 的 工作 就 变 成 了 看 着 所 想 
要 的 布局 自己 展现 在 你 眼前 。 这 就 好 像 你 不 断 地 切削 石膏 直到 雕塑 成 型 。 
在 开始 安排 页 面 内 容 时 ， 我 会 秉承 这 一 最 基本 的 (同时 也 相当 复杂 的 ) 
设计 方法 。 简 单 来 说 ， 我 把 所 有 的 栏目 区 域 都 扔 到 显示 屏 上 ， 然 后 移 来 
移 去 不 断 地 调整 让 它们 彼此 协调 。 

这 个 过 程 有 点 类 似 玩 拼图 游戏 ， 只 不 过 没有 盒子 封面 那 张 最 终 完成 的 图 
作 提 示 ， 而 且 拼 图 的 每 一 个 部 分 都 能 任意 改变 大 小 。 
























































(D Bob Ross (1942—1995) 是 美国 当代 最 富 盛 名 的 自然 主义 绘画 大 师 。 他 出 神 入 化 的 
技巧 、 行 云 流 水 式 的 画 风 ， 开 创 了 绘画 的 新 纪元 。 他 曾经 主持 了 美国 最 广为人知 的 
艺术 类 电视 节目 “绘画 的 乐趣 ” 教 观众 如 何 绘制 “快乐 的 树 尖 “快乐 的 云彩 ”和 
“快乐 的 群 山 ”。 在 节目 每 一 集 的 末尾 他 都 会 说 :“ 绘 画 时 没 人 会 犯错 误 ， 那 只 是 
些 快乐 的 小 意外 。” 一 一 译 者 注 
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我 最 先 考 虑 的 是 主要 图 片 展示 部 分 ， 因 为 它 需 要 的 区 域 最 大 。 与 此 同时 我 
也 颇 为 得 意 地 创建 了 一 个 宽 宽 的 区 域 放 置 新 闻 ， 因 为 它 需 要 空间 显示 文 
章 的 摘录 片段 。 至 于 My account (我 的 账户 )、Navigation〈 导 航 栏 ) 以 及 
Featured item〔 网 站 特色 项 目 )， 我 把 它们 平等 对 待 ， 放 在 了 页 面 左 侧 。 


几 分 钟 之 后 ， 我 得 到 了 第 一 个 版 本 ， 见 图 1-1。 













































































图 1-1 


这 时 我 突然 感觉 到 新 闻 部 分 似乎 太 宽 了 。 这 个 宽度 能 让 我 显示 很 长 的 头 
条 ， 也 能 放 很 多 摘录 内 容 ， 但 同时 它 也 不 便于 继续 划分 区 域 ， 分 别 去 显 
示 关 于 站 点 的 内 容 和 关于 业界 的 内 容 。 为 了 纠正 这 一 点 ， 我 把 该 区 域 分 
开 为 两 列 ， 见 图 1-2。 


好 多 了 。 


随后 我 又 意识 到 另外 一 个 问题 。 刚 开始 设计 时 ， 我 猜测 自己 可 能 需要 3 
列 来 放置 所 有 的 内 容 。 而 现在 发 现 完全 不 需要 那么 多 栏目 就 能 够 解决 问 
题 ， 因 此 我 移 去 了 第 三 列 。 然 后 我 加 大 了 左 侧 列 的 宽度 ， 这 样 能 为 站 点 
导航 栏 和 网 站 工具 列表 留 下 更 多 的 生存 空间 。 与 此 同时 也 加 宽 了 主要 内 
容 区 ， 从 而 有 了 更 多 地 方 来 放置 特色 图 片 和 新 闻 。 如 图 1-3 所 示 。 








6 


$13 


令 人 心动 的 第 一 印象 



























































Ll 发 现 页 面 布 局 7 





现在 页 面 开 始 成 型 了 。 整 个 网 页 更 突出 了 站 点 的 主要 目的 一 一 展示 社区 
成 员 的 艺术 创作 以 及 相关 新 闻 。 所 以 我 确信 自己 的 方向 正确 。 嗯 ， 继 续 
前 进 。 

我 知道 首页 主要 的 目的 是 吸引 或 者 说 诱 使 ) 用 户 注册 ， 因 此 我 把 注意 
力 放 在 了 注册 区 域 。 

一 般 来 说 注册 区 域 都 需要 一 些 颇具 号 召 力 的 标语 和 一 个 按钮 。 所 以 我 随 
便 写 了 一 些 字 ， 做 了 一 个 按钮 ， 然 后 把 它们 丢 进 去 。 如 图 1-4 所 示 。 
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就 这 么 简单 。 
现在 请 允许 我 稍微 扯 一 些 题 外 话 。 
“Automattic” 的 一 次 飞跃 


此 前 ， 我 为 Automattic “公司 主持 过 一 次 有 关 设 计 方面 的 研讨 会 。 会 上 我 
们 讨论 了 这 个 公司 颇 受 欢迎 的 博客 软件 WordPress2。 讨 论 过程 中 我 











CD Automattic 公司 的 网 址 为 http://automattic.com/。 一 一 译 者 注 
@) WordPress 的 网 址 为 http://wordpress.com/。 译 者 注 
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和 Automattic 一 位 叫做 Andy Skelton 的 员工 一 起 设法 为 WordPress.com 
首页 做 了 一 点 小 改动 ， 目 标 是 提升 网 站 的 注册 率 。 


我 们 由 原先 的 设计 开始 。 见 图 1-5. 
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图 1-5 








我 为 该 页 面 创建 了 一 个 框图 ， 便 于 演示 和 分 析 结 构 (有 些 地 方 则 直接 使 
用 了 屏幕 截图 )。 关 于 如 何 让 更 多 人 关注 注册 区 域 ，Andy 和 我 商量 出 了 
一 些 办 法 。 我 挪 走 了 那个 蓝 色 的 Start your WordPress Blog. (开始 你 自己 
的 WordPress 博客 )， 用 一 个 很 大 的 黄色 Banner 区 域 替 代 ， 并 在 里 面 放 
了 一 个 夸张 的 Sign Up Now! 〈 现 在 就 注册 ! ) 按钮 。 这 样 不 仅 能 让 用 户 
更 容易 注意 到 注册 区 域 ， 而 且 它 把 该 区 域 和 页 面 其 他 部 分 清晰 地 分 隔 开 
来 。 如 图 1-6 所 示 。 


W) WORDPRESS 





Sign Up Features Support Story Advanced 


What's happening right now on WordPress.com? 


Featured post: someblog.com Already Hip? 
Username: 
Post title rhoekmanjr 
Post body post body post body post body post body post body post body 
post body post body post body post body post body post body post body Password: 
post body post body post body post body post body post body post body — — 7,,...... 
post body post body post body. ct M 
LL Remember me ( Logn ) 
Post body post body post body post body post body (Read more ...) Lost your password? 
Today's Hot Blogs More » Today's Hot Posts More » 
WordPress News 
CNN Political Ticker € Netflix cuts prices...for DVDs and its 
ICAN HAS CHEEZBURGER? rix adiu IsIn 
, li '] iti ly Facel 
Hu dier Romney says ‘lighten up' to sign critic SUR anui 
38 Pitches EE TEE notice in your 
en Piin m Four Taos teens kicked off train 600 dashboard? 





图 1-6 


HE, BAA AI IARR mI Az A Matt Thomas 设计 了 新 页 面 
的 最 终 美 术 效果 并 开始 改写 代码 。 几 个 小 时 后 首页 就 大 功 告 成 了 了 《这些 
家 伙 真 的 一 点 都 不 浪费 时 间 ! D. 


设计 时 我 们 商量 把 Sign Up Now 按钮 改 成 绿色 ， 这 样 它 将 和 页 面 中 其 他 
所 有 元 素 形 成 鲜明 对 照 ， 效 果 更 加 突出 。Matt 试 了 试 ， 感 觉 很 不 错 ， 于 
是 他 更 新 了 首页 。 图 1-7 是 最 终 的 结 
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WY WORDPRESS 





SignUp Features Support Story Advanced 


Express yourself. Start a blog. 
See our free features» 


1,383,169 BLOGS WITH 57,645 NEW POSTS TODAY 

dicm dote Already Hip? 

Hawt Post More » Username. 
Password 


Move over, fake Steve Jobs 
This is admittedly very, very inside. But someone on WordPress 
launched this week a site called Michael Arrington's Lost your password? 
CrunchFood, which would appear to be a knowing parody of the 
formidable TechCrunch site. Whoever is writing it has a [...] 

The Browser: Analyzing the tech biz WordPress News 


C Remember me ( Login ) 





Your WordPress Is In 
My Facebook 





me Morem Did you see a renewal 
notice in your 
tes cages E IN WORLD dashboard? 
Michael Vick? So what! Let's mp Saawariya - First look Click a Day Stats 
talk about "The Iraq"! Refresh 


Windows Live Writer 


IN FOOD eO IN ENTERTAINMENT F 
2 Egg in the hole pes What I Did This Weekend There Wednesday 


Redoable Lite 
IN CARS. IN TECHNOLOGY Submit for Review 
(mi The New 2008 Honda Accord em Obsessed? Perhaps, but I e e" 
回 Unveiled, but for the American Ain't Scared! and a Blog Mp Os 
markets Milestone! 


1N POLITICS IN TRAVEL 

Options on the table By Noam ba Executive Chef Jeff Walter 

Chomsky Joins Hard Rock Hotel 
San Diego 


Right Now in Tags More » 


Art Books Culture Family Food Friends Humor Life Love Movies Music. News 
Personal Photography Poetry POlitiCS Random Religion Thoughts Travel video Media 
Photos Technology 


Terms of Service Privacy Support Stats Copyright 2007 Automattic, Inc. AUTOMATTIC 





图 1-7 


我 们 所 做 的 工作 如 下 : 增 大 了 注册 区 域 ， 写 了 一 句 颇 具 号 召 力 的 标语 
[Express yourself. Start a blog《〈 创 建 博客 ， 表 达 自 我 )]， 同 时 还 把 Sign 
Up Now 按钮 做 得 又 大 又 美观 。 此 外 我 们 把 这 个 按钮 设置 为 绿色 ， 这 样 它 
就 能 从 页 面 中 脱 蜂 而 出 。 这 些 改动 创建 了 一 条 清晰 的 通道 ， 带 领 浏览 者 
们 前 往 注册 页 面 ， 那 里 也 正 是 我 们 想 要 他 们 去 的 地 方 。 


当时 对 于 这 个 新 设计 能 提升 多 少 站 点 注册 率 ， 每 个 人 的 看 法 不 一 。 而 
Matt 是 其 中 最 乐观 的 一 位 ， 他 猜测 注册 率 将 会 提升 10%。 
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而 事实 证 明 ， 这 点 小 小 的 设计 改动 产生 了 相当 大 的 效果 ， 超 出 了 
Automattic 团队 所 有 人 的 预期 。 


新 页 面 上 线 后 的 第 一 天 ， 新 的 博客 注册 率 和 用 户 注 册 率 分 别提 高 了 大 约 
1296 和 14%。 这 足以 好 好 庆祝 一 番 了 ， 但 这 还 不 是 最 后 的 结果 。 


接 下 来 的 几 周 内 ， 注 册 率 提高 到 了 25% ， 并 且 稳 定 地 保持 在 这 个 水 平 。 
小 小 的 改动 却 带 来 巨大 的 飞跃 。 特 别 是 当 我 们 考虑 到 WordPress.com 每 
个 月 都 会 迎 来 数 百 万 名 浏览 者 这 一 事实 。 所 以 ， 如 果 你 以 前 怀疑 过 设计 
能 够 改变 项 目的 命运 ， 那 么 ， 现 在 开始 相信 上 吧 。 


因为 这 一 点 ， 我 认为 自己 在 这 个 社区 网 站 上 能 更 好 地 把 用 户 的 视线 引导 
到 注册 区 域 来 。 


C1.2 引导 用 户 的 视线 


我 发 现 ， 如 果 把 注册 区 域 移 到 主要 图 片 展示 区 的 下 面 ， 就 能 创造 出 一 种 
被 称 为 是 Diagonal Balance (对 角 线 平衡 ) 的 和 谐 状态 。 这 个 设计 理念 源 
HT “TRR RK”. 

1.2.1 应 用 古 腾 堡 图 表 

人 们 在 浏览 页 面 或 布局 的 时 候 ， 视 线 往往 趋向 于 从 左上 角 移 动 到 右 下 角 ， 
就 好 像 页 面 的 布局 设计 有 某 种 自然 引力 一 样 。 因 为 人 们 通常 都 是 从 左 至 
右 、 由 上 往 下 地 阅读 ， 久 而 久之 视线 自然 会 沿 着 这 一 路 径 移动 。 古 腾 保 
图 表 简 单 地 描述 了 这 一 阅读 轨迹 规律 ， 见 图 1-8。 



































图 1-8 





DAR e mE Johannes Gutenberg，1400 一 1468)， 德 国 印刷 工人 ， 传 统 上 认为 是 
他 发 明了 西方 的 活字 印刷 术 。 译 者 注 
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古 腾 保 图表 中 ， 左 上 角 是 第 一 视觉 落 点 区 (Primary Optical Area, POA), 
而 右 下 角 则 是 最 终 视觉 落 点 区 (Terminal Anchor, TA). 与 之 相对 ， 右 上 
角 和 左下 角 则 是 视觉 讶 点。 因此， 采用 对 角 线 平衡 通常 都 是 一 个 好 设计 
所 需要 考虑 的 因素 ， 因 为 设计 师 遵 从 了 用 户 习 惯性 的 眼 动 规律 。 


简单 来 说 ， 为 了 实现 “对 角 线 平衡 ”的 布局 设计 ， 我 们 可 以 运用 视觉 元 素 
来 创建 一 条 虚拟 的 “ 线 ”， 让 用 户 的 视线 跟随 它 从 左上 到 右 下 旦 对 角 线 似 
地 移动 。 这 条 对 角 线 就 像 箭头 一 样 指向 最 终 视觉 落 点 。 

举 个 例子 。 在 Mini 汽车 的 美国 官网 首页 上 ， 动 画 里 各 个 元 素 出 现 的 先后 
次 序 同 样 也 采取 了 对 角 线 设计 。 首 先 ， 网 站 的 logo 标志 出 现在 页 面 的 左 
上 角 ， 见 图 1-9. 

































































图 1-9 


然后 页 面 上 画 出 了 一 个 矩形 线 框 ， 从 左上 角 到 右 下 角 以 动画 形式 出 现 ， 
WE] 1-10. 
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图 1-10 


最 后 ， 一 系列 Mini Cooper 的 小 车 模 从 右 下 角 驶 入 屏幕 ， 见 图 1-11。 











THE ALWAYS OPEN MINI COOPER S CONVERTIBLE. STARTING AT $26,050.* 
4 AIRBAGS WITH SIDE-THORAX PROTECTION. 





图 1-11 








我 们 常见 的 对 话 框 也 同样 遵循 了 从 左 至 右 、 由 上 往 下 的 视觉 大 
1-12 所 示 。 
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Bullets and Numbering 
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图 1-12 
看 上 去 很 熟悉 吧 ? 就 是 这 样 。 
为 了 把 这 一 方式 应 用 到 客户 的 主页 上 ， 我 交换 了 注册 区 和 图 片 展示 区 的 


位 置 ， 使 站 点 logo 和 Sign Up Now 按钮 之 间 形 成 了 一 条 对 角 线 ， 如 图 
1-13 所 示 。 
















































































图 1-13 


L2 ”引导 用 户 的 视线 15 
然而 ， 为 了 让 这 个 社区 的 页 面 真正 地 焕发 光彩 ， 我 还 需要 加 入 一 点 颜色 。 


1.2.2 ”使 用 颜色 来 吸引 注意 


颜色 能 把 人 的 注意 力 吸 引 到 特定 的 元 素 上 去 ， 而 且 效 果 非 常 奇 妙 ， 尤 其 
当 某 个 元 素 的 颜色 与 其 他 的 形成 反差 时 更 是 如 此 。 相 对 于 一 致 性 来 说 ， 
人 类 对 物体 间 的 差异 性 更 为 敏感 。 因 此 在 页 面 中 加 入 一 些 颜 色 ， 可 以 非 
常 有 效 地 把 浏览 者 的 视线 引导 到 我 们 希望 他 们 看 到 的 地 方 。 

为 了 着 重 强调 在 首页 中 采用 对 角 线 平衡 设计 ， 我 把 站 点 logo 的 主 色调 海 
蓝 色 应 用 到 了 Sign Up Now 按钮 上 ， 然 后 把 它 也 设置 为 主要 图 片 展示 区 
域 的 背景 颜色 。 见 图 1-14。 



































Marketing text goes here. 






































图 1-14 
随后 ， 我 决定 页 面 中 的 其 他 元 素 将 不 会 再 用 到 海蓝 色 。 


通过 使 用 相同 颜色 将 三 个 元 素 捆绑 到 一 起 ， 用 户 的 视线 将 由 站 点 logo 引 
导 到 充满 趣味 的 相关 内 容 ( 特 色 图 片区 )， 然 后 再 移动 到 Sign Up Now 
按钮 。 
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因此 ， 从 最 初 简 单 的 布局 设计 开始 (只 是 把 需要 的 栏目 堆放 到 页 面 上 ， 
而 没有 做 其 他 考虑 )， 我 逐步 地 做 了 一 些小 小 的 变动 ， 创 建 了 一 条 对 角 
线 ， 从 而 支持 了 用 户 由 左上 到 右 下 的 视觉 自 然 规律 。 采 用 视觉 移 动 的 自 
然 轨迹 意味 着 最 终 的 设计 将 有 助 于 用 户 更 快 地 熟悉 站 点 ， 并 且 指引 用 户 
下 一 步 该 做 什么 ， 这 样 会 让 页 面 更 加 友好 。 换 句 话 说， 设计 让 用 户 对 网 
站 产生 了 美好 的 第 一 印象 。 


对 角 线 平衡 法 则 并 不 一 定 适用 于 每 个 页 面 设计 ， 因 此 不 必 强 制 遵守 。 但 
是 如 果 发 现 使 用 对 角 线 平衡 可 能 有 助 于 强调 整个 页 面 意图 ， 不 妨 考 虑 一 
试 。 另 外 ， 当 你 在 开始 某 个 设计 的 时 候 ， 时 刻 想 着 对 角 线 平衡 法 则 ， 很 
多 情况 下 它 都 会 发 挥 效用 。 

常见 的 页 面 布 局 案例 ， 可 以 参考 Yahoo! Design Pattern Library "ff Page 
Grids 栏目 。 那 里 还 提供 一 些 页 面 模板 ， 在 你 开始 设计 时 可 能 会 用 到 ( 记 
住 ， 关 于 本 书 里 引用 的 所 有 链接 ， 你 都 能 在 www.rhjr.net/dtm 找到 )。 

















(D Yahoo! Design Pattern Library 的 网 址 为 http://developer.yahoo.com/ypatterns/。 





译 者 注 








"le 过 去 是 这 样 ， 将 来 一 直 也 是 这 样 。 事 实 上 ， 
约 想 着 有 一 天 能 够 说 服 自 己 最 终 创 造 出 一 


儿 年 来 ， 我 为 自己 的 个 人 





的 都 只 是 在 x 
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个 简单 到 什 和 


网 站 进行 了 多 次 改版 设计 。 而 每 一 



































ove + rage 


前 的 基础 上 
每 一 次 改版 完成 时 我 都 认为 不 可 能 
翻 出 了 之 前 某 版 本 的 备份 ， 让 我 追 
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或 多 或 少 地 简化 、 再 简化 一 些 。 





























我 曾经 


么 也 没有 的 页 面 。 


次 改版 所 做 
想起 来 ， 在 












































忆 恨 久 ， 见 图 2-1。 
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$)news 


Flash Out of the Box | O'Reilly | My book on Flash basics has 
been released! It is a very reader-centric, task-oriented 
approach to learning Flash and great for newbies and 
programmers alike. 


WidgetMaker.net | Check out my brand new Flash blog and 
widget-resource site, complete with free source files, 


KnowledgeNet (part of Thomson NETg) | I recently joined the 
Engineering department of the e-Learning industry leader as a 
Flash developer. 





| InformIT | Check out the latest 
installment in my series on Flash techniques you can learn in 10 
minutes or less. 


Ð books 


| New Riders | I wrote chapters 1 and 2 
for the latest in the popular Magic series, about modular site 
architecture and creating custom presentations. I also served as 
tech editor for two other chapters. 


| Lynda.com | I was a 


contributing author for three chapters, and did technical review 
for the book. 


图 2-1 


简洁 了 ， 可 随后 又 推翻 了 这 


结论 。 
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我 的 意思 是 说 ， 在 这 几 年 逐步 深入 学 习 网 页 设计 和 交互 设计 之 后 ， 我 提 
升 了 欣 芝 的 品味 ， 磨 练 了 设计 的 技巧 。 而 这 些 都 迫使 我 去 设计 一 个 新 的 
网 站 版 本 ， 使 之 能 更 好 地 展现 我 的 个 性 。 很 多 人 都 对 这 个 网 站 表示 赞 
许 ， 但 其 实在 一 开始 我 特别 惊讶 。 因 为 当时 我 并 不 认为 它 有 什么 特别 之 
处 一 一 它 是 如 此 简单 ， 如 此 基本 ， 如 此 乏味 。 


当时 我 觉得 ， 这 个 基本 得 几乎 不 可 思议 的 布局 根本 就 不 值得 大 书 特 书 。 
图 片 没 几 张 ， 所 以 也 没什么 可 欣赏 的 ;然而 文字 却 不 少 ， 所 以 你 必须 读 
很 多 。 总 之 ， 在 那个 时 候 我 觉得 网 站 里 到 处 都 是 缺点 。 


但 结果 证 明 它 们 不 是 缺点 。 事 实 上 这 个 设计 正好 传达 了 我 所 希望 传达 的 
内 容 一 一 我 是 一 个 极 简 主 义 者 ， 喜 欢 用 最 简洁 的 方式 与 人 们 沟通 〈 有 点 
讽刺 意味 ， 不 是 吗 ? )。 这 种 特别 的 设计 风格 其 实 展现 了 我 的 个 性 。 


所 有 的 网 站 都 在 展现 某 种 个 性 ， 但 这 并 不 一 定 都 是 有 意 为 之 。 很 多 时 
候 个 性 都 是 在 无 意 间 流 露出 来 的 。 这 种 时 候 ， 公 司 不 知 不 觉 间 可 能 就 
会 把 内 部 问题 暴露 在 网 站 这 样 一 个 和 客户 发 生 接 触 的 第 一 平台 。 比 如 
说 ， 如 果 公司 士气 低落 ， 网 站 的 设计 可 能 会 表现 得 乏味 而 毫 无 生气 ;而 
如 果 雇 员 激 情 满 怀 兴高采烈 ， 该 公司 的 网 站 则 很 可 能 丰富 多 彩 ， 活 跃 而 
富有 魅力 。 


我 一 直 进行 网 站 改版 其 实 也 是 一 种 个 性 的 展现 。 每 个 网 站 都 可 以 这 样 做 
来 展现 自己 的 品牌 形象 ， 或 者 说 传达 一 个 公司 希望 和 外 界 交 流 的 讯 县 


设计 时 我 并 没有 真正 意识 到 我 正在 干什么 ， 我 只 是 在 不 停 地 摸索 直到 确 
定 某 个 想法 。 但 是 这 种 极端 简洁 的 设计 最 终 使 我 发 现 ， 运 用 一 些 巧 妙 的 
元 素 把 所 有 设计 捏合 成 一 个 整体 将 有 助 于 展现 个 性 ， 不 管 团体 或 个 人 都 
是 如 此 。 而 且 很 容易 做 到 这 一 点 : 我 们 只 需要 强调 那些 已 经 有 的 东西 ， 
从 而 形成 一 种 有 凝聚 力 的 “品牌 ”。 
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C2.1 统一 设计 风格 ， 形 成 积极 的 印象 


几 年 前 刚 开 始 设计 时 ， 我 知道 页 面 应 该 采取 一 个 单列 的 布局 。 因 为 我 要 
放 在 网 页 中 的 文本 只 有 一 列 ， 同 时 站 点 导航 部 分 也 只 需要 一 行 。 因 此 我 
创建 了 一 个 简单 的 居中 列 ， 它 的 宽度 足以 在 低 分 辨 紊 的 显示 器 上 显示 ， 
而 且 左 右 两 边 还 能 留 下 很 不 错 的 边 距 。 如 图 2-2 所 示 。 
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Heading 


| dolor sit amet, consectetuer adipiscing elit. 
Maecenas mi est, viverra eu, sagittis sed, ultrices eget. felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 
Aliquam gravida risus quis neque. Donec at nunc. 


Heading 


Lorem ipsum dolor sit amet | Consectetuer adipiscing elit. 
Maecenas mi est, viverra eu, sagittis sed, ultrices eget. felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 
Aliquam gravida risus quis neque. Donec at nunc. 


Heading 


Lorem ipsum dolor | Sit amet, consectetuer adipiscing elit. 
Maecenas mi est, viverra eu, sagittis sed, ultrices eget. felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 
Aliquam gravida risus quis neque. Donec at nunc. 


Footer text | link | link 








图 22 

首页 项 行 供 站 点 导航 使 用 ， 而 它 下 方 的 空间 则 预 留 放置 动画 图 片 〈 那 个 
时 候 ， 我 做 过 很 多 动画 设计 )。 

由 于 在 文本 列 的 两 侧 都 留 下 了 很 宽 的 边 距 ， 我 决定 在 左边 区 域 放 置 站 点 


标志 。 标 志 是 一 个 非常 简单 的 logo， 包 含 了 两 个 单词 Love CE F Rage 
( 怒 )， 由 一 个 加 号 〈+) 隔 开 。 这 是 当时 我 从 巴 效 . 鲁 霍 曼 执导 的 莎 士 比 
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亚 名 剧 Romeo + Juliet ^re Sid 3k LR. df, de^ A — Ap 


觉 如 此 丰富 的 电影 中 获得 灵感 非常 容易 。 但 是 朋友 们 ， 


我 就 已 经 很 快活 了 。 


只 要 能 有 点 灵感 


在 这 个 logo 下 面 有 一 个 小 小 的 、 手 绘 的 心 形 图 标 ， 从 而 构成 了 整个 标志 。 
个 点 子 源 自 于 我 多 年 前 写 的 一 首 歌 (显然 ， 它 


顺便 说 一 句 ,，“ 爱 与 怒 ” 这 














也 是 一 部 电影 的 名 字 ? )。 再 
我 自己 写 的 歌词 。 此 后 我 在 网 上 再 没有 使 用 过 这 个 短语 。 














次 ， 我 因为 灵感 而 兴奋 ， 即 使 那 是 出 自 于 














我 把 这 个 图 形 放 到 结构 框图 里 ， 把 它 与 动画 图 片 顶部 对 齐 。 见 图 2-3. 
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Heading 

| dolor sit amet, consectetuer adipiscing elit. 
Maecenas mi est, viverra eu, sagittis sed, ultrices eget, felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 


magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 


Aliquam gravida risus quis neque. Donec at nunc. 


Heading 


Lorem ipsum dolor sit amat | Consectetuer adipiscing elit. 
Maecenas mi est, viverra eu, sagittis sed, ultrices eget. felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 


magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 


Aliquam gravida risus quis neque. Donec at nunc. 


Heading 

Lorem |; | Sitamet, consectetuer adipiscing elit. 
Maecenas mi est, viverra eu, sagittis sed, ultrices eget. felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 


magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 


Aliquam gravida risus quis neque. Donec at nunc. 


Footer text | link | links 














这 是 个 好 的 开始 ， 但 它 还 不 足以 把 所 有 设计 捏合 成 一 个 整体 。 我 希望 有 
直 延 续 下 去 ， 并 且 整 合 每 个 页 面 ， 为 网 站 











什么 东西 能 够 在 整个 站 点 








图 2-3 
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创造 出 一 个 有 凝聚 力 的 形象 。 我 所 想 要 的 应 该 是 一 个 符号 。 























(D Romeo--Juliet 引进 版 名 为 “现代 罗密欧 与 朱丽叶 ”， 美国 福克斯 影 业 公司 1996 年 出 














品 。 在 电影 标题 中 ,“ 罗 密 欧 ”和 “朱丽叶 ”之 间 有 一 个 “+” 的 
小 小 的 “&”。 相关 网 址 为 http://www.romeoandjuliet.com/。 一 一 译 者 注 





© Love and Rage 是 一 部 德国 





与 爱尔兰 合拍 的 影片 ，Nova Films 于 1998 年 出 品 。 





fpe. 里 面 有 一 个 








一 一 译 者 注 
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使 用 符号 


我 第 一 次 了 解 符 号 语言 是 在 看 电影 的 时 候 。 不 ， 不 是 那些 角色 *， 而 是 角 
色 之 外 的 东西 。 它 们 就 如 同 贯穿 影片 的 隐喻 和 象征 一 般 用 于 表现 某 个 主题 。 


例如 ， 在 影片 In the Cut? (Pathe Productions F 2003 年 出 品 ) 中 从 始 至 
终 都 是 黯淡 的 色调 ， 但 偶尔 会 插 和 一抹 深 红 来 勾勒 出 主角 Frannie (H 
Meg Ryan 饰演 ) 的 线索 。 影 片 的 标题 、 故 事情 节 和 结尾 的 那 一 幕 都 无 可 
避免 地 与 红色 联系 到 一 起 。 本 质 上 颜色 成 为 了 影片 的 一 种 符号 语言 ， 或 
者 说 是 另 一 个 角色 。 


同时 ， 我 从 自己 的 偶像 设计 师 Hilman Curtis 身上 学 到 了 更 多 关于 符号 的 
使 用 方法 。 


当 Hillman 和 他 的 团队 为 影片 Bend It Like Beckham ? (Gurinder Chadha 于 
2002 年 执导 ) 设计 官方 网 站 时 ， 把 网 站 的 焦点 集中 在 一 个 足球 上 ， 让 它 
带领 着 用 户 从 网 站 的 一 个 栏目 移动 到 另 一 个 栏目 。 这 个 足球 符号 整合 了 
所 有 的 设计 元 素 ， 同 时 延续 了 影片 中 那 种 乐观 向 上 的 情绪 。 见 图 2-4. 











NOW AVAILABLE ON DVD 








图 2-4 





中 此 处 “符号 ”的 原文 为 “character”。 英 文中 “character” 含 义 丰 富 ， 除 了 “符号 ” 
之 外 还 有 “角色 ”“ 字 符 ””“ 性 格 ” 等 多 种 字义 。 译 者 注 

@ m the Cut 中 文 译名 为 “裸体 切割 ”或 “ 凡 I 线 第 六 感 "。 相 关 网 址 为 http://www.apple. 
com/ trailers/sony_pictures/ in the cut/. 译 者 注 

(3) Bend It Like Beckham 中 文 译 名 为 “我 爱 贝克 汉 姆 ”。Kintop Pictures 于 2002 年 出 品 。 
网 址 为 http://www.foxsearchlight.com/benditlikebeckham/。 译 者 注 
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然而 ， 
在 大 多 
趋势 来 


在 这 个 


Ax 


第 2 


E 


Xo nx 














并 不 是 所 有 符号 都 能 像 摄 影 师 运 ) 
数 情 况 下 ， 他 们 只 需要 简单 地 在 
保持 一 致 的 主题 风格 。 


项 目 中 ， 我 有 一 个 加 号 图 案 和 一 颗 心 









































放 在 页 


£x 


的 那个 
它们 。 


见 图 








， 就 像 段落 的 着 重 号 一 样 。 




















j 视 觉 叙 述 那样 
网 站 中 重复 出 现 


a 











UEDA 
tB 





每 个 标题 的 前 面 见 图 2-5。 
| mind*soul | online | widgets | writings | me | them | contact | 
E 


Heading 


| dolor sit amet, consectetuer adipiscing elit. 
Maecenas mi est, viverra eu, sagittis sed, ultrices eget. felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 


Aliquam gravida risus quis neque. Donec at nunc. 


Heading 


Lorem ipsum dolor sit amet | Consectetuer adipiscing elit. 
Maecenas mi est, viverra eu, sagittis sed, ultrices eget. felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 


Aliquam gravida risus quis neque. Donec at nunc. 


Heading 


| Sitamet, consectetuer adipiscing elit. 
Maecenas mi est, viverra eu, sagittis sed, ultrices eget, felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 


Aliquam gravida risus quis neque. Donec at nunc. 


Footer text | link | link 








图 2-5 
自从 初 ! 


Ab, 


MB. 

















， 这 样 看 上 去 相 
































图 形 。 于 是 我 抹 去 了 这 些 心 ， 试 着 用 经 过 加 








不 再 帮 人 给 女生 递 纸 条 后 ， 我 
就 没 见 过 在 哪个 地 方 有 这 么 多 心 的 。 这 可 不 是 我 想 在 网 上 | 














来 表现 自己 
Iff E SOR ER 
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加 号 图 案 有 两 层 含 义 。 它 不 仅仅 是 网 站 logo 元 素 在 整个 站 点 中 的 延续 ， 
还 创造 出 一 种 效果 ， 即 页 面 中 的 每 个 文本 段落 都 吸附 到 各 标题 的 下 面 。 
与 此 同时 ， 它 还 暗示 这 些 内 容 是 新 的 ， 仿 佛 那个 “+” 意 味 着 “ 刚 加 上 ” 
一 样 。 

很 好 ， 这 个 小 成 果 让 我 感到 非常 季 运 。 运 气 绝对 是 设计 的 一 部 分 。 在 设 
计 logo 时 我 根本 没 打算 重复 使 用 这 个 元 素 ， 但 当 它 出 现在 合适 的 位 置 时 
我 发 现 效 果 很 棒 ， 何 乐 而 不 为 ? 
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love+rage | | 
C V Motion graphic 


^* Heading 

| dolor sit amet, consectetuer adipiscing elit. 
Maecenas mi est, viverra eu, sagittis sed, ultrices eget. felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 
Aliquam gravida risus quis neque. Donec at nunc. 





中 Heading 

| Consectetuer adipiscing elit. 
Maecenas mi est, viverra eu, sagittis sed, ultrices eget. felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 
Aliquam gravida risus quis neque. Donec at nunc. 


(+ Heading 

Lorem ipsum dolor | Sit amet, consectetuer adipiscing elit. 
Maecenas mi est, viverra eu, sagittis sed, ultrices eget. felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 
Aliquam gravida risus quis neque. Donec at nunc. 


Footer text | link | link 








图 2-6 


同时 我 还 注意 到 页 面 中 最 突出 的 logo 和 标题 文字 ， 它 们 之 间 有 点 不 太 相 
配 。 这 个 矛盾 让 我 意识 到 还 得 再 深入 一 步 。 见 图 2-7。 
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/) | Motion graphic 


+ Heading 

Lorem Ipsum | dolor sit amet, consectetuer adipiscing elit. 
Maecenas mi est, viverra eu, sagittis sed, ultrices eget, felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 
Aliquam gravida risus quis neque. Donec at nunc. 


+ Heading 





| Consectetuer adipiscing elit. 
Maecenas mi est, viverra eu, sagittis sed, ultrices eget. felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 
Aliquam gravida risus quis neque. Donec at nunc. 


由 Heading 

| Sit amet, consectetuer adipiscing elit. 
Maecenas mi est, viverra eu, sagittis sed, ultrices eget. felis. 
Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nulla semper. Quisque 
tincidunt, purus sit amet porttitor gravida, ante dui consequat 
magna, in adipiscing enim est non nisi. Sed neque. Nulla ante. 
Aliquam gravida risus quis neque. Donec at nunc. 


Footer text | link | lick 








图 2-7 


我 需要 在 标题 中 使 用 和 logo 一 样 的 特殊 字体 。 于 是 我 删除 了 各 标题 的 
HTML 文本 ， 而 把 文字 做 成 图 片 显 示 。 在 那个 时 候 我 并 不 太 了 解 易 用 性 
和 搜索 引擎 优化 技术 ， 也 没有 意识 到 所 用 的 都 是 可 恶 的 表格 ”"。 匹 配 字体 
并 不 算 错 但 是 把 文字 转化 为 图 片 意味 着 搜索 引 过 味 无 法 对 标题 和 

行 分 析 ， 而 且 这 些 图 片 对 屏幕 阅读 器 《帮助 那些 视力 不 佳 的 用 户 浏览 网 
页 的 设备， ?来 说 也 毫 无 意义 


当时 我 的 确 很 天 真 ， 就 这 么 艰难 地 行进 下 去 。 我 编写 了 页 面 模板 ， 创 建 
了 动画 图 片 ， 然 后 为 站 点 构建 了 所 有 其 他 的 页 面 。 





















































D 当今 流行 的 XHTML+CSS 技术 要 求 Web 设计 师 使 用 规范 的 HTML 代码 。W3C 组 
织 建议 HTML 代码 应 当 只 起 到 单纯 的 语义 作用 ， 这 表示 页 面 布局 应 通过 CSS 来 实 
现 。 严 格 意义 上 来 说 ， 表 格 只 能 用 于 表现 表格 数据 ， 而 不 能 被 用 来 规划 页 面 的 布 
结构 。 这 对 广大 习惯 于 使 用 表格 布局 的 设计 师 来 说 是 一 个 很 大 的 冲击 ， 但 亦 是 潮 光 
趋势 的 必然 。 一 一 译 者 注 

@ 屏幕 阅读 器 的 原理 是 “朗读 ”出 页 面 中 的 文本 文字 。 很 明显 它们 无 法 朗读 出 图 片 的 

内 容 ， 但 可 以 读 出 图 片 的 ALT 字符 串 。CHTML 中 为 IMG 标记 添加 的 文本 字符 串 ， 

了 于 对 网 页 中 的 图 片 进行 描述 。 它 人 允许 使 用 纯 文 本 浏览 器 或 选择 不 下 载 图 像 的 用 户 

了 解 图 像 的 说 明 。) 一 一 译 者 注 
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为 了 延续 加 号 图 标 这 一 符号 ， 我 把 它 用 在 每 一 


个 页 面 的 每 一 个 标题 
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FE. HE 


dh, ai AAR "ove and rage) 相符 ， 另 外 一 个 栏目 的 主题 mind 


and soul 中 也 有 一 





mind«soul 
C4 


个 and， 我 把 这 个 图 








Se oni TH ove pages, 
study everything that had just suddenly entered my head, and 
then go back to read five more pages. 
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1 This ha: 
en my favorite for a long time. It's a philosophical discourse 
that follows the story of a man in search of his former self, and 
it will en ge your life, You can read it online, but I highly 
picking up a paperback 
y Besor Religion section) of your favi orte tobistone 
ith you on a long vacati a year and 


copy in the Philosophy 


, go to the. library, 


| I may be a en biased - I 


Dharma Bums (Jack Kerouac) 

first read this book while travelling around the country, ending 

up in San Francisco at the same time the author did in the story 
MEE book n E you on a ride you'll never forget. 


rhythm that will tap into the best parts of 


| An oracle book 
ji 


Te 
for the ages. Timeless, beautiful, elegant, and powerful. The link 
here goes to an online version of it, but I highly recommend 

picking up the real thi 
Be affected by it. It will change your perspective on virtually 


at a bookstore. Carry it around, Read it. 


Inspiration 


Bruce Mau's Incomplete Manifesto for Growth | 
er r designers - hard and true. Read it, think about it, learn from 


Hillman Curtis | Check out the Adobe System: 
Lore nd It's a great demonstration of "making ei init ible 








图 2-8 


标 也 用 在 了 那里 。 见 图 2-8 的 左 侧 。 


就 是 这 样 了 。 这 个 简单 、 基 础 、 乏 味 的 网 站 ， 满 是 缺陷 和 失误 。 但 它 仍 
是 我 的 最 爱 ， 胜 过 任何 其 他 我 为 自己 设计 的 站 点 。 





这 段 时 间 以 来 ， 我 一 直 希 望 重新 设计 自己 的 网 站 ， 
计 一 样 展现 我 的 个 性 。 而 下 一 





证 新 的 版 本 成 为 我 的 最 爱 。 





就 像 我 所 说 的 ， 不 管 是 有 心 还 是 无 意 ， 
， 并 相应 做 出 简单 的 改动 ， 我 们 便 能 够 往 自 己 想 要 
的 任何 方向 修 塑 我 们 网 上 的 形象 。 一 般 来 说 ， 大 部 分 人 都 不 愿 自己 看 
望 传达 给 用 户 一 种 特别 的 氛围 。 品 
能 够 以 一 种 文雅 而 易于 理解 的 方式 来 
E 希 望 他 们 看 到 的 东西 。 





意 网 站 正在 传达 什么 

















去 单调 乏味 、 军 无 生 

















气 ， 每 个 人 都 硕 
牌 标志 以 及 源 目 品牌 标志 的 符号 ， 
传达 信息 ， 并 且 向 用 户 展现 我 们 真 J 









































也 就 是 说 ， 





























标 和 符号 


次 设计 ， 我 希望 自己 能 





让 你 的 品牌 标志 保持 精致 和 优雅 。 








慎重 、 





能 够 像 这 个 最 初 的 设 
更 周到 ， 


网 站 都 会 展现 某 种 个 性 。 时 刻 注 


















































你 不 能 
i 要 有 良好 的 判断 力 来 调整 
它们 简单 朴素 一 

















随便 扔 出 个 足球 然 
品牌 商 





在 你 第 一 次 使 用 某 个 Web 应 用 产品 时 ， 熟 悉 它 的 关键 在 于 是 否 能 理解 整 
个 站 点 的 内 部 结构 。 而 最 初 的 几 个 瞬间 对 于 是 否 能 形成 美好 的 第 一 印象 











令 人 迷惑 的 术语 和 拙劣 的 结构 组 织 ， 将 会 在 儿 秒 钟 内 把 我 们 从 满怀 希望 
和 兴致 勃勃 带 往 灰 心 、 失 败 和 挫折 。 所 以 能 很 快 在 网 站 中 找到 方向 的 重 
要 性 是 筋 良 置疑 的 。 


人 们 通常 获得 导向 的 方法 是 : 粗略 扫 视 一 遍 页 面 ， 看 看 自己 有 哪些 选 
择 ,， 并 且 快 速 过 滤 挥 那些 无 关 自 己 兴 趣 的 内 容 。 例 如 ， 在 某 个 企业 网 
站 寻找 该 公司 的 信息 时 ， 我 们 会 寻找 诸如 About COEF), Company 
(公司 )、Us CRT) 以 及 类 似 的 超 链接 。 如 果 看 到 那些 不 符合 自己 需 
要 的 链接 ， 我 们 会 直接 忽略 它们 。 而 当 某 个 符合 需要 的 链接 出 现时 ， 
我 们 会 更 为 仔细 地 查看 与 其 毗邻 的 文字 ， 以 图 确定 其 是 否 正 是 我 们 需 
要 的 选项 。 如 果 是 ， 我 们 就 单 击 。 


换 句 话说 ， 我 们 先 浏 览 页 面 的 各 主要 区 域 ， 找 出 相关 的 部 分 ， 然 后 在 这 
些 部 分 里 的 项 目 中 找 出 关联 性 更 强 的 ， 并 且 希 望 最 终 能 发 现 那 些 我 们 确 
实 一 直 在 寻找 的 内 容 (或 者 ， 如 果 浏 览 没有 什么 特定 目的 ， 我 们 可 能 会 
发 现 更 有 趣 的 内 容 )。 


这 种 推理 的 过 程 不 仅 能 帮助 我 们 首次 浏览 时 找到 方向 ， 而 且 还 能 在 我 们 
使 用 过 网 站 一 段 时 间 后 ， 帮 助 我 们 进一步 寻找 某 些 信息 ， 或 者 完成 某 些 
任务 。 出 于 这 种 原因 ， 导 航 过 程 本 身 是 否 合理 变 得 至 关 重 要 。 它 的 意义 
不 在 于 是 否 能 反映 了 网 站 内 部 的 结构 ， 而 是 在 于 对 我 们 用 户 是 否 合 情 合 
理 。 网 站 必须 符合 我 们 思考 问题 的 方式 。 


我 曾经 参与 过 一 个 项 目 ， 需 要 重新 设计 一 个 面向 网 站 建设 者 的 “所 见 即 
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所 得 "” 式 的 Web 应 用 。 这 个 程序 有 些 类 似 Google Page Creator”， 它 让 
用 户 仅 需 操作 可 视 化 的 编辑 工具 就 能 创建 和 编辑 网 页 ， 而 无 需 手 写 代码 。 


然而 ， 与 Page Creator 不 同 ， 这 个 产品 已 经 存在 了 很 长 一 段 时 间 ， 经 历 过 
好 几 次 大 的 改动 。 站 点 的 功能 越 来 越 多 ， 站 点 的 导航 也 变 得 越 来 越 繁 见 。 
网 站 建设 者 只 是 随意 地 将 新 的 界面 元 素 添 加 到 网 页 中 ， 结 果 用 户 越 来 越 
难 完成 任务 。 


对 于 一 个 用 户 达 好 几 万 人 的 Web 应 用 程序 来 说 ， 这 种 状态 可 不 乐观 。 


开发 团队 和 我 在 一 起 工作 了 好 几 周 ， 对 该 产品 做 了 一 次 全 面 检修 。 导 航 
功能 只 是 其 中 的 一 小 部 分 ， 但 却 又 是 非常 重要 的 一 部 分 。 


C3.1 告诉 软件 该 做 什么 


在 我 准备 着 手 设计 整个 产品 的 导航 《或 者 称 之 为 持久 导航 ) 时 ， 它 看 起 
来 其 实 相 当 简 单 : 只 包含 两 个 按钮 标签 ， 分 别 是 Home CHÍ 90 M Site 
(站 点 )。 然 而 展开 Site 标签 后 ， 却 出 现 了 一 大 堆 应 用 功能 选项 ， 而 且 羔 
单项 之 间 宇 无 顺序 。 见 图 3-1。 


真正 的 下 拉 荣 单 要 比 这 里 显示 的 长 很 多 ， 但 这 已 经 足够 让 你 发 现 问题 了 。 
每 一 个 菜单 项 都 为 了 一 个 完全 不 同 的 目的 而 通 往 一 项 完全 不 同 的 任务 。 
例如 ，Create new page《〈 创 建新 页 面 ) 和 Edit contact information 〈 编 辑 联 
RERO 选项 ， 很 明显 相互 之 间 训 无 关系 。 没 有 一 个 用 户 会 这 么 想 : 我 
要 编辑 联系 信息 ， 所 以 应 该 到 Site 羔 单 里 面 找 。 但 事实 上 这 两 个 选项 大 
然 就 像 两 只 走 丢 的 小 狗 一 样 紧 紧 靠 在 一 起 。 


这 些 不 同类 型 的 动作 应 该 以 更 自然 的 形式 进行 分 组 。 从 这 个 菜单 往 下 看 ， 
我 发 现 了 一 些 彼此 相关 的 名 词 。 诸 如 Webpage (WH), New page (新 页 
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CD “所 见 即 所 得 ”的 英文 缩写 为 WYSIWYG (What You See Is What You Get， 通 常 发 音 
为 “wizzywig”)。 它 是 一 种 计算 机 方面 的 技术 ,使 用 户 在 编辑 视图 中 所 看 到 的 文档 
与 该 文档 的 最 终 产 品 具 有 相同 的 样式 ， 也 允许 用 户 在 视图 中 直接 编辑 文本 、 图 形 或 
文档 中 的 其 他 元 素 ， 故 也 称 “ 可 视 化 操作 ”。 例如 Dreamweaver 等 软件 。 一 一 译 者 注 

(2) Google Page Creator 是 Google 公司 于 2006 年 2 月 推出 测试 的 在 线 网 页 创建 工具 。 
人 们 可 以 在 其 免费 提供 的 100MB 空间 中 自由 创建 网 页 并 托管 。 该 产品 提供 多 种 网 
页 模板 ， 用 户 可 以 直接 输入 内 容 、 上 传 图 片 并 发 布 这 些 网 页 ， 无 需 懂 得 HIML。 网 
址 为 http://pages.google.com/。 一 一 译 者 注 
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M) 4 Navigation 〈 导 航 栏 ) 等 都 是 可 以 创建 和 编辑 的 站 点 组 成 部 分 ， 而 
Templates and colors 〈 模 板 和 颜色 ) 以 及 Fonts〈 字 体 ) 则 与 网 站 的 外 观 
有 关联 。 


























Settings Help 





Design web page 
Edit navigation 
Create new page 
Create/edit forum 

Create "Coming Soon" page 
Edit templates & colors 
Customize fonts 

Organize site 

Manage files 

Edit contact information 

My account 





图 3-1 
于 是 我 把 这 些 菜单 选项 分 成 了 几 个 部 分 ， 使 之 更 好 地 反映 了 它们 彼此 间 











的 自然 联系 ， 然 后 对 它们 分 类 标识 。 新 的 栏目 标签 如 图 3-2 所 示 。 


— —— snes — — | Sines Hap | 


图 3-2 


这 些 新 的 分 类 标签 把 一 开始 的 选项 列表 划分 成 好 几 个 组 ， 分 别 包 含 了 站 
点 各 元 素 、 扩 展 功 能 (例如 论坛 )， 以 及 网 站 样式 。 然 后， 重新 检查 ， 看 
看 每 个 菜单 在 新 的 标签 下 表现 如 何 。 在 做 这 些 的 时 候 ， 我 还 去 掉 了 每 个 
菜单 项 前 面 的 动词 ， 比 如 Edit (编辑 )、Manage (管理 )， 等 等 ， 只 留 下 
了 简单 的 词组 ， 这 样 它们 可 以 更 容易 地 被 用 户 扫 描 到 。 用 户 只 需要 浏览 
图 3-3 中 的 列表 ， 就 可 以 很 轻易 地 找 出 Web page、Navigation， 或 者 任何 
其 他 选项 。 


分 组 看 上 去 变 得 更 有 意义 了 。 然 而 ， 就 像 你 所 看 到 的 ， 我 同时 也 创建 了 
一 个 怪 里 怪 气 的 “废料 箱 ” 菜 单 ， 我 称 之 为 Misc. G) 














CD Misc. 为 Miscellaneous 的 缩写 。 一 一 译 者 注 
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— pin - —— — EMEN 


Web page 
Navigation 


Coming Soon page 





ELEM — — — | Setinge hep | 


Templates & colors 






Fonts 


A 


Site organization 
Files 
Contact information 
Account 









图 3.3 
每 个 应 用 程序 都 需要 一 个 废料 箱 ， 对 吧 ”? 

















是 的 ， 我 也 不 喜欢 它 。 在 头 5 秒 钟 内 它 还 貌似 有 点 意义 ， 但 随即 我 就 意 
识 到 这 玩意 很 令 人 厌恶 。 首 先 ， 我 很 想 找 一 个 更 好 的 名 词 去 表现 Misc. 里 
有 的 项 目 ， 而 随后 我 发 现 是 否 有 好 名 词 这 一 点 根本 不 是 问题 所 在 。 
3.1.1 每 个 人 都 想 当 指 挥 

软件 并 不 是 为 了 我 们 能 单 击 那 些 按 钮 而 存在 。 它 是 为 了 我 们 能 完成 任务 
而 存在 。 这 样 我 们 才能 做 事情 。 
所 以 导航 栏 不 应 该 是 陈列 在 一 排 按 钮 上 的 一 串 名 词 ， 而 应 该 帮助 我 们 感 
觉 自 己 正 在 做 一 些 事 情 ， 让 我 们 找到 当 司 机 的 感觉 。 

我 们 人 类 不 喜欢 感觉 到 自己 正 按 软 件 的 要 求 去 做 事情 。 在 决定 采取 某 个 
行为 的 瞬间 ， 我 们 希望 由 自己 控制 软件 ， 由 自己 告诉 它 应 该 做 些 什 么 ， 
而 不 是 相反 。 任 何 违 反 这 一 意愿 的 软件 都 会 让 人 感到 愚蠢 而 糟糕 ， 结 果 
会 敬而远之 。 
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看 看 你 的 身边 ， 你 会 发 现 很 多 软件 的 导航 都 设计 成 让 用 户 感觉 自己 才 是 


主人 。 


从 微软 的 Word 到 Adobe 的 Hlustrator， 它 们 的 菜单 所 包含 的 选项 


都 是 为 了 用 户 去 做 某 件 事情 ， 例 如 Edit (编辑 ) 和 View (查看 )。 
这 些 菜单 不 是 基于 对 象 而 是 基于 任务 的 。 这 才 是 它们 应 该 有 的 样子 。 
我 关注 并 重组 了 菜单 中 的 对 象 ， 但 其 实 我 应 该 关注 这 个 程序 中 所 需要 完 


成 的 人 























E 务 类 型 。 为 了 做 到 这 一 点 ， 那 些 术 语 应 当 显 示 为 动 宾 词 组 ， 而 不 





仅仅 只 是 又 丑 又 过 时 的 名 词 。 


也 许 你 已 经 明了 ， 所 谓 动 宾 词 组 就 是 动词 -名 词 的 简单 组 合 ， 以 动词 开 











头 并 以 名 词 结 尾 。 通 过 这 种 形式 构成 的 词语 ， 我 们 就 能 告诉 软件 我 们 希 
望 做 哪 种 动作 ， 以 及 这 个 动作 所 针对 的 对 象 是 什么 。 这 让 我 们 感觉 自己 
正在 指挥 软件 : 我 们 是 领导 者 ， 而 不 是 被 领导 者 。 


ARCH SHE. SERR SER TRES o 


为 了 





























上 救 这 一 问题 ， 我 把 由 名 词 主导 的 按钮 标签 改 成 了 由 动词 主导 的 标 

















签 。 见 图 3-4。 
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Web page 
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Settings Help 
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New page 
Forum 
Coming Soon page 









Fonts 











Site organization 
Files 

Contact information 
Account 
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不 再 是 为 了 任务 而 去 选择 Styles 〈 样 式 ) — Fonts (字体)， 你 现在 可 以 告 
诉 软件 你 想 Manage Fonts 〈 管 理 字体 )。 按 钮 标签 是 动词 ， 而 菜单 选项 是 
名 词 。 


现在 用 户 可 以 感觉 到 自己 在 指挥 着 软件 。 现 在 他 们 能 够 去 Design CX 
io 导航 栏 或 者 某 个 存在 的 网 页 、Create〈 创 建 ) 论坛 或 新 页 面 ， 以 及 
Customize (定制 ) 站 点 的 结构 、 文 件 等 。 


顺便 说 一 句 ， 如 果 用 户 希 望 为 网 页 中 的 文本 选择 某 个 字体 ， 我 也 许 会 建 
议 使 用 Styles 一 Fonts。 但 在 这 个 项 目 中 ， 用 户 希 望 的 却 是 管理 各 种 可 用 
字体 ， 以 便于 能 转化 为 图 片 显示 ， 而 不 受 其 他 浏览 者 系统 字体 的 限制 。 


在 把 这 一 块 转交 给 开发 团队 之 前 ， 我 还 需要 再 做 一 件 事 。 
3.1.2 ”避免 Login 综合 症 


每 个 设计 师 或 多 或 少 都 会 有 自己 的 怪兽 。 我 的 怪癖 就 是 十 分 讲究 怎样 使 
H Login 以 及 与 之 对 应 的 Logout. 


我 参与 过 许多 应 用 程序 的 开发 ， 它 们 大 多 都 会 用 到 这 些 词 儿 ， 但 其 效果 
总 让 我 怀疑 。 

所 有 策划 、 设 计 和 构建 Web 应 用 程序 的 人 都 想 要 实现 一 些 目标 。 要 实现 
起 来 并 不 轻松 ， 必 须 怀 着 创造 一 款 伟大 的 产品 的 信念 ， 而 且 要 全 心 投 入 
其 中 才 行 。 

开发 者 、 项 目 经 理 还 有 设计 师 们 创建 一 球 产 品 ， 花 费 了 无 数 个 小 时 去 规 
划 、 编 写 代码 、 测 试 可 用 性 ， 还 要 考虑 到 所 有 能 想到 的 事情 。 而 在 这 些 
难以 想象 的 艰苦 工作 之 后 ， 他 们 把 所 有 的 内 容 交 给 一 个 碰 上 谁 就 是 谁 的 
人 来 发 布 。 而 这 个 人 往往 会 输入 一 个 Login， 然 后 就 这 么 扔 在 那里 。 看 看 
图 3-5 吧 。 


其 中 两 张 截图 来 自 非常 知名 的 Web 应 用 产品 。 在 这 些 首 页 上 就 有 一 个 很 
基本 的 语法 错误 ， 而 网 站 的 每 一 个 用 户 都 会 时 不 时 看 到 它 并 且 会 单 击 它 。 
也 许 是 每 周 用 到 一 次 ， 也 许 是 每 天 就 用 到 一 次 。 
在 这 些 截 图 里 面 ， 还 有 互联 网 上 数 不 尽 的 其 他 类 似 例 子 中 ，Login 这 个 词 
的 用 法 是 错误 的 。 
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Blog Learn Signup™™” 








Member Login 

Member Name: 

Password: PLEASE LOGIN: 
Pasvord 





图 3-5 
Login 不 是 一 个 动作 ， 这 就 好 像 “ 鞋 ”不 是 一 个 动作 一 样 。 它 是 一 个 名 
词 ， 意 思 是 the Login Interface (登录 的 界面 )。 


你 不 会 想 要 用 户 去 Login， 那 样 根 本 毫 无 道理 。 你 想 要 的 是 让 他 们 去 
Log In。 在 产品 界面 中 使 用 Login 一 词 表现 得 很 不 专业 ， 说 明 开 发 者 没有 








尽 到 责任 一 一 在 程序 中 有 一 些 内 容 没有 经 过 仔细 考虑 ， 没 有 确保 所 有 的 
设计 都 是 精心 而 为 的 。 


这 就 像 竖 起 一 块 牌坊 告诉 大 家 :“ 我 们 很 细心 ， 但 不 是 百分之百 。” 


再 加 上 ， 用 户 所 希望 的 并 不 是 去 和 界面 里 的 对 象 进行 交互 ， 而 是 去 做 自 
己 所 要 做 的 事 。 他 们 的 目的 并 不 是 单 击 它 然后 去 看 登录 面板 ， 而 只 是 想 


登录 。 
因此 你 所 需要 的 不 是 一 个 名 词 ， 而 是 一 个 命令 。 
我 的 这 个 项 目 里 面 也 有 Login 这 个 词 ， 见 图 3-6。 
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Login | My Account 


— — — [Manage v | Customize v | — — 








所 以 我 把 它 变 成 了 一 个 命令 ， 见 图 3-7。 





Sign in | My Account 


Home Design 了 Create 了 ELETTA Customize Y Settings Help 








图 3-7 

也 许 大 多 数 人 从 来 都 不 会 注意 到 这 里 所 显示 的 是 一 个 单词 还 是 两 个 。 但 
即使 没有 人 注意 ， 错 误 的 用 词 仍然 会 导致 产品 给 人 留 下 不 专业 的 印象 。 
差 之 毫 厘 ， 雇 以 千里 。 请 确保 产品 的 每 一 个 细节 都 是 正确 的 ， 以 此 来 告 
WHJ: 

“我 很 细心 ， 百 分 之 百 ， 从 始 至 终 。” 

3.1.3 ”我 来 说 ， 你 来 做 

对 于 用 户 来 说 ， 他 们 对 站 点 保持 兴趣 的 关键 在 于 能 否 获 得 方向 感 、 能 否 
得 到 所 需 的 信息 ， 以 及 能 否 完 成 任务 。 清 晰 的 导航 结构 不 仅 有 助 于 用 户 
了 解 网 站 能 做 些 什么 ， 还 能 知道 如 何 去 做 。 

运用 动 宾 词 组 ， 按 钮 和 链接 就 能 有 效 地 告诉 用 户 能 做 什么 。 同 时 也 使 得 
用 户 感到 自己 是 指挥 者 ， 是 用 户 告 诉 应 用 程序 去 做 什么 ， 而 不 是 反 过 来 。 
创建 产品 导航 时 ， 请 确保 你 是 以 用 户 为 出 发 点 ， 而 不 是 以 系统 为 出 发 点 。 
用 户 不 是 工具 ， 系 统 才 是 。 
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无 论 你 习惯 于 在 哪个 网 站 浏览 新 闻 ， 比 如 BBC 3r PO, CNN, 
Yahoo3， 或 者 其 他 什么 网 站 ， 你 都 会 面 对 各 种 各 样 的 链接 。 这 些 链接 会 
按照 时 间 、 相 关 度 、 点 击 率 以 及 其 他 种 种 顺序 排列 。 这 是 件 好 事 ， 因 为 
它 使 得 找寻 信息 相对 来 说 更 为 容易 。 见 图 4-1。 
























































Latest News 
Parents distraught after mine tragedy 
Alleged cocaine trafficker dies in airstrike 
Bush: Fear, failure won't dictate withdrawal 
Thousands without a/c in triple digit California 
Ticker: Bush in new book: I cry a lot in this job 
Kayakers under bridge saved as water rises 


>: Police officer kills two pedestrians 
Friend: Owen Wilson doing better 
Hookers drop charges against Gadhafl's nephew 
Boy dies digging sand tunnel 
Nazi tourism leaves 3-mile long hotel 
White House race enters prime time 
Escaped alligator scares neighbor 
'Halloween' scares up record Labor Day 
Chihuahua wins 'fastest' title in 2 seconds 
CNN Wire: Latest updates on top stories 





图 4-1 




















这 说 明 即 使 是 链接 这 种 最 简单 、 最 基础 的 设计 也 是 能 够 改进 的 。 最 近 ， 
在 创建 一 个 链接 列表 时 ， 我 找到 了 一 个 这 样 做 的 机 会 。 





























网址 为 http://news.bbc.co.uk/。 一 一 译 者 注 
© 网 址 为 http://www.cnn.com/。 一 一 译 者 注 
© 网 址 为 http:// www.yahoo.com/。 一 一 译 者 注 
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在 这 个 例子 中 ， 我 需要 在 一 家 公司 的 内 部 网 首页 上 创建 一 个 标题 列表 ， 
让 该 公司 呼叫 中 心 的 雇员 们 随时 了 解 最 新 事件 。 这 些 标题 的 链接 有 点 类 
似 新 闻 列 表 ， 需 要 按时 间 顺 序 显示 ， 但 一 次 只 需 显 示 5 条 信息 。 




































































我 从 最 普通 的 设计 开始 ， 创 建 了 一 个 简单 的 链接 列表 ， 如 图 4-2 所 示 。 


Most recent headlines 


Title of most recent story (...) 
Title of slightly less recent story (...) 








Title of slightly less recent story (...) 
Title of slightly less recent story (...) 
Title of slightly less recent story (...) 





图 42 
下 一 步 考虑 如 何 让 用 户 看 明白 这 些 从 上 到 下 的 标题 链接 是 按照 什么 顺序 
排列 的 。 在 这 个 呼叫 中 心里 ， 最 新 事件 往往 是 最 重要 的 事件 。 

我 可 以 在 旁边 放 一 些 说 明 性 文字 来 做 到 这 一 点 ， 比 如 “本 列表 按照 从 最 
新 到 最 老 的 顺序 排列 ”但 是 这 样 需要 花费 用 户 更 多 的 精力 去 阅读 。 对 于 
Web 应 用 来 说 ， 不 必要 的 阅读 是 人 们 最 不 愿意 去 做 的 事情 。 











































































































所 以 我 采用 了 男 一 种 方案 。 我 把 标题 从 1 一 $ 进行 了 标号 ， 觉 得 这 样 差 
不 多 算是 大 功 告 成 了 ， 如 图 4-3 所 示 。 














Most recent headlines 


1. Title of most recent story (...) 

2. Title of slightly less recent story (...) 
3. Title of slightly less recent story (...) 
4. Title of slightly less recent story (...) 
5. Title of slightly less recent story (...) 























图 4-3 
对 列表 项 目 进行 编号 基本 上 能 表现 出 它们 排列 的 顺序 ， 但 是 列表 看 上 去 





























仍然 很 单调 。 这 证 我 相当 头疼 ， 因 为 即使 每 一 个 项 目 都 编 了 号 ， 它 们 彼 
此 之 间 还 是 太 相 像 了 。 
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在 这 个 呼叫 中 心里 ， 最 新 事件 往往 最 为 重要 。 它 通常 意味 着 公司 某 个 环 
节 发 生 了 突 发 性 事件 ， 需 要 尽快 通知 客户 或 消费 者 。 这 些 事 件 可 能 是 售 
后 服务 资源 短缺 ， 也 可 能 是 计 费 系统 和 暂时 性 故障 ， 也 可 能 是 其 他 事情 ， 
它们 都 需要 呼叫 中 心 的 雇员 在 第 一 时 间 内 获得 上 述 信息 。 


而 在 这 样 一 个 单调 的 列表 里 ， 每 一 个 链接 都 和 其 他 链接 如 此 相似 ， 它 怎 
样 才能 凸显 出 那个 No.1 的 重要 性 呢 ? 


最 近 在 Boxes and Arrows "上 读 到 了 一 篇 名 为 “环境 的 提示 ”的 文章 ， 
作者 是 Ross Howard， 我 从 中 获得 了 些许 灵感 。 


04.1 让 环境 提示 成 为 引导 的 线索 


Howard 在 文章 中 提 到 ， 在 日 本 的 城 际 铁路 线 上 ， 每 一 个 站 台 都 会 在 列 
车 进 站 后 播放 自己 独特 的 音乐 旋律 。 因 为 那些 经 常 乘坐 同一 线路 的 乘客 
(例如 上 班 族 ) 会 在 乘 车 途中 感到 无 聊 ， 他 们 会 看 书 、 读 报纸 ， 或 者 打开 
笔记 本 电脑 工作 ， 而 不 一 定 会 去 关注 每 一 站 的 站 牌 或 列车 的 语音 播报 。 
而 到 达 每 一 站 都 提前 播放 一 段 独 有 的 音乐 旋律 ， 能 有 效 地 引起 乘客 的 注 
意 ， 从 而 提早 准备 下 车 。 


Howard 把 这 种 音乐 广播 称 之 为 环境 的 提示 。 列 车 线路 中 还 包括 其 他 的 环 
境 特 征 ， 例 如 隧道 、 每 个 站 台 的 外 观 等 。 而 这 些 音乐 旋律 和 它们 一 起 帮 
助 乘客 在 脑海 里 构建 一 张 虚拟 的 乘 车 线路 图 ， 从 而 避免 坐 过 站 。 


j 环 境 作 提示 这 个 想法 引起 了 我 的 兴趣 ， 因 为 它 表 示 当 用 户 在 网 站 上 完 
成 某 项 任务 时 ， 很 可 能 是 一 种 无 意识 的 举动 。 在 这 个 企业 内 部 网 上 ， 最 
有 帮助 的 事情 芮 过 于 让 用 户 很 容易 地 找到 正确 信息 。 于 是 我 尝试 把 环境 
提示 这 一 概念 应 用 到 链接 列 
我 舍弃 了 列表 编号 ， 同 时 根据 文章 发 布 的 时 间 顺 序 改变 了 每 一 个 链接 的 
字体 大 小 。 最 新 发 布 的 链接 字体 最 大 ， 下 面 的 链接 字体 依次 变 小 ， 以 此 
现 列表 中 的 文章 越 来 越 陈旧 ， 其 重要 程度 也 越 来 越 低 。 见 图 4-4. 
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(D Boxes and Arrows 是 一 个 网 站 ， 关 注 图 形 设 计 、 交 互 设计 及 信息 构架 的 各 种 实践 、 
创新 和 讨论 。 网 址 为 http://www.boxesandarrows.com/。 一 一 译 者 注 
Q 这 篇 文章 全 名 为 “Ambient Signifiers: How I Learned to Stop Getting Lost and Love 
Tokyo Rail", F 2006 4E 9 H / x. JE X Wb http://www.boxesandarrows.com/view/ 
译 者 注 











ambient signifi; 
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这 样 一 来 ， 事 情 发 生 了 很 大 变化 。 较 大 的 字 从 较 小 的 文字 中 凸显 出 来 ， 
使 得 列表 中 第 一 个 链接 的 重要 性 一 目 了 然 。 男 一 方面 ， 更 大 的 字体 显得 
更 为 沉重 ， 颜 色 也 更 深 ， 这 使 得 它们 的 表现 力 更 为 突出 。 
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Most recent headlines 


Title of most recent story (...) 
Title of slightly less recent story (...) 
Title of slightly less recent story (...) 








Title of slightly less recent story (...) 
Title of slightly less recent story (...) 








图 4-4 


展现 岁月 的 印记 


设计 的 时 候 ， 我 突然 想起 设计 师 Brendan Dawes 曾经 在 他 的 Analog In, 
Digital Qut -一 书 中 谈 到 过 岁月 感 的 问题 。Dawes 多 愁 善 感 地 回忆 起 在 他 
刚 接触 电脑 时 曾经 读 过 的 一 本 小 册子 ， 那 上 面 不 小 心 留 下 了 一 些 喝 茶 时 
溅 落 的 污 迹 。 他 以 此 谈 到 在 数字 领域 中 岁月 感 的 匮乏 。 数 字 化 的 文件 不 
会 溅 上 茶 污 ， 这 一 点 相对 于 实体 化 的 真实 文件 来 说 是 一 个 巨大 的 优势 ， 
即 它们 在 创建 多 年 后 依然 保存 如 新 。 但 这 同时 也 意味 着 从 满 是 茶 污 的 物 
品 上 获得 的 怀旧 之 情 已 经 永远 遗失 在 数字 世界 中 了 。 


当时 这 个 想法 让 我 浮想 联翩 。 这 很 自然 ， 因 为 一 一 哇 嗓 ! 想 想 你 能 在 网 
页 上 变 出 怎样 的 戏法 ! 


网 页 上 无 法 表现 出 岁月 感 这 个 问题 确实 一 直 都 在 困扰 着 我 ,但 我 从 没 想 
过 那些 古老 的 东西 需要 以 某 种 方式 让 它们 看 起 来 古老 。 没 错 ， 许 多 网 页 
的 文章 都 会 显示 日 期 来 表明 它们 的 原始 发 布 时 间 ， 但 是 仅 此 一 个 表明 
年 代 的 迹象 通常 很 轻易 就 会 被 忽略 , 而 且 还 有 很 多 网 页 根本 就 不 显示 日 
期 一 一 没有 任何 表明 年 代 之 处 。 


比如 说 ， 我 三 年 前 写 的 一 篇 文 昔 ， 没 准 在 今天 就 会 变 成 菜 个 搜索 条 件 下 
的 第 一 条 结果 。 而 如 果 文章 中 没有 标明 发 布 日 期 的 话 ， 又 怎样 才能 让 人 



























































































































































中 尽管 书 名 中 包含 了 “模拟 输入 ”和 “数字 输出 ”的 文字 ，4mnalog In, Digital Out 其 
实 是 一 本 关于 如 何 提升 交互 设计 创造 力 的 书 。New Riders 出 版 社 于 2006 年 9 月 出 
版 。 一 一 译 者 注 
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们 搞 清 楚 它 并 不 是 昨天 才 发 布 的 呢 ? 


因此 ， 我 不 时 会 收 到 几 封 电子 邮件 问 我 一 些 三 年 来 从 没 再 想 过 的 问题 。 
这 些 问题 非常 新 ， 然 而 我 以 前 的 回答 …… 可 能 就 会 显得 有 些 迟 钝 了 。 


如 果 网 页 中 表现 出 岁月 的 印记 ， 那 么 读 到 这 篇 三 年 前 文章 的 用 户 就 能 很 
清楚 地 知道 它 是 很 久 以 前 发 表 的 ， 于 是 就 会 转 去 其 他 地 方 搜索 更 新 一 些 
的 信息 ， 或 者 至 少 调整 一 下 要 发 给 我 的 问题 。 


在 参考 了 Brendan 的 想法 之 后 ， 我 决定 让 这 个 链接 列表 的 设计 更 进一步 ， 
努力 传达 出 每 个 链接 是 更 新 还 是 更 旧 。 上 毕竟 在 这 个 项 目 中 ， 越 新 意味 着 
越 重 要 。 


且 如 何 能 让 链接 看 起 来 很 日 呢 ? 


Google Reader 对 此 提供 了 一 种 答案 。 它 正好 在 当时 发 布 了 一 个 新 版 本 ， 
而 我 注意 到 在 里 面 有 一 种 特别 的 标签 云 2?， 它 比 大 多 数 的 标签 云 在 内 涵 上 
要 更 丰富 一 些 (有 关 标 签 云 我 们 将 在 第 5 章 专门 讨论 )。 除 了 字体 大 小 
之 外 ， 这 种 标签 云 还 使 用 了 颜色 来 表明 某 个 链接 相对 的 受 欢迎 程度 。 见 
图 4-5。 
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Tags 
The more items a tag has, the bigger it appears 


e more of those items you have read, the darker itis 


general gigs my-sites podcasts user-experience web-apps web-standards world-changing 








图 4-5 

在 它 下面 有 一 行 说 明文 字 :“ 标 签 含 有 的 项 目 越 多 ， 该 标签 字体 就 越 大 
项 目 点 击 的 次 数 越 多 ， 该 标签 颜色 就 越 深 。?” 

我 觉得 这 段 说 明文 字 稍 嫌 哆 嗪 ， 但 同时 我 也 党 得 这 种 双重 指示 器 〈 字 体 
大 小 和 文本 颜色 ) 是 一 个 很 好 的 想法 ， 所 以 我 借鉴 了 它 。 

































































(D Google Reader 是 Google 提供 的 在 线 RSS 阅读 工具 。 用 户 可 以 自己 创建 阅读 名 单 ， 
及 时 获得 自己 挑选 的 内 容 或 更 新 的 信息 聚合 ， 也 能 通过 电子 邮件 将 这 些 聚 合 的 信息 
与 朋友 即时 分 享 。 网 址 为 http://www.google.com/reader。 译 者 注 

@ 标签 云 的 英文 为 Tag Cloud。 标 签 (Tag) 是 个 人 所 做 的 关键 词 标 明和 归 类 ， 便 于 对 
互联 网 上 的 内 容 进行 搜集 和 整理 。 标 签 云 则 是 所 有 标签 的 集合 ， 通 过 标签 的 字体 大 
小 来 表现 其 关联 的 文章 多 少 。 它 被 称 为 是 又 一 个 Web 2.0 元 素 。 一 一 译 者 注 
















































































我 根据 从 新 到 旧 的 顺序 修改 链接 列表 ， 


所 示 。 
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使 得 它 的 颜色 由 深 至 浅 ， 如 图 4-6 


Most recent headlines 


Title of most recent story (...) 
Title of slightly less recent story (...) 





Title of slightly less recent story (...) 





Title of slightly 


| less recent story 
Title of slightly less recent story (u) 


LC) 

















图 4-6 








最 终 的 调整 创造 出 一 种 效果 ， 即 从 最 新 的 链接 开始 逐渐 向 下 淡化 ， 而 这 
也 使 得 表意 更 为 消 晰 第 一 条 链接 最 习 


逐条 递减 。 


非常 好 。 这 个 正 是 我 一 直 想 要 的 。 











EE 要 ， 从 它 开 








这 种 环境 提示 在 最 终 的 网 页 中 是 不 是 真 的 起 到 了 明显 的 作 月 














有 。 会 不 会 有 人 因为 列表 最 后 的 链接 字体 太 小 而 烦恼 ? 有 可 能 ， 但 是 攻 
为 浏览 器 字体 的 大 小 可 调 ， 所 以 这 和 




















说 你 应 当 立 刻 把 这 一 招 用 在 自己 的 网 页 











E? 





























仅仅 只 在 它 真 正 会 起 作用 的 时 候 。 


环境 提示 这 一 概念 在 互联 网 上 并 没有 完全 推广 开 来 ， 而 现实 中 却 存 在 着 
阔 视 野 ， 看 看 身边 有 什么 能 够 激发 灵感 ， 














各 种 各 样 的 应 用 方法 。 你 应 当 开 


























提升 自己 的 设计 。 如 果 能 够 雪中送炭 地 帮助 用 





简直 太 棒 了 。 




















不 用 强迫 自己 这 么 做 ， 但 是 请 时 刻 留意 去 寻找 机 会 ， 
现 灵感 ， 哪 怕 和 它们 看 上 去 和 你 所 做 的 事 靶 不 相干 。 





始 ， 链 接 的 重要 程度 


























H? 或 许 并 没 














FP 情况 也 不 太 会 发 生 。 我 是 不 是 在 劝 
































就 会 让 你 灵光 一 内， 找到 一 种 更 新 疾 、 
在 这 个 案例 中 ， 我 做 的 一 a de a 而 我 


























的 出 发 点 仅仅 只 是 为 用 户 提供 导 | 





对 用 户 都 是 有 益 的 。 AILEE MIMIR 自动 理 



































X , 只 赁 直觉 ， 而 不 需要 思考 和 检验 。 




















更 有 效 的 设计 思路 。 











户 找到 所 需 的 信息 ， 那 你 


同时 也 要 留意 去 发 





天 知道 它们 什么 时 候 


。 为 创建 明确 的 路 线 而 做 的 任何 事情 
解 链接 顺序 的 含 
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在 Designing the Obvious 书 中 我 曾 提 到 有 位 设计 师 带 着 他 设计 的 博客 模板 



























































来 找 我 。 这 个 设计 里 面 有 一 个 带 有 标签 云 的 工具 栏 ， 此 外 还 有 两 个 按钮 























A 


一 个 是 按 标签 云 显示 ， 另 一 个 是 按 列 表 显 示 。 


|n 





在 这 里 我 想 把 那个 故事 稍稍 再 扩展 一 下 ， 因 为 自从 写 了 Designing the 

















Obvious 之 后 ， 我 又 学 到 了 一 些 东西 ， 它 们 改变 了 我 之 前 的 观点 。 



























































标签 云 是 一 种 链接 列表 ， 显 示 在 一 个 区 域内 ， 并 且 按照 热门 程度 《或 者 














其 他 准则 ) 来 加 重 显示 其 中 的 某 些 标签 。 最 后 的 结果 看 上 去 就 像 
接 的 “云层 ”就 像 Flickr 网 站 所 设计 的 那样 ?。 见 图 5-1。 
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africa amsterdam animals apii architecture art asia august australia baby barcelona 
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图 5-1 
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CD 示例 见 http://www.flickr.com/photos/tags/. ——— Vit 
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Flickr.com “是 第 一 个 使 用 标签 云 的 大 型 网 站 ， 而 这 个 想法 也 早已 为 无 数 其 
他 网 站 所 借鉴 。 所 以 当 这 位 设计 师 与 我 探讨 博客 模板 时 ， 我 想 的 是 :“ 酷 ! 


咱们 就 这 么 干 。 标 签 云 现在 越 来 越 流行 ， 让 我 们 看 看 这 里 是 否 也 能 





» 
o 








那 位 设计 师 根 据 自己 的 想法 已 经 做 了 非常 深入 的 设计 。 最 开始 他 建立 了 











一 个 简单 的 链接 列表 ， 堵 
如 网 5-2 所 示 。 























按照 链接 所 指向 的 内 容 热门 程度 进行 了 排序 。 


user experience 
experience design 
interaction design 
visual design 
articles 

books 
development 
design 

code 

resources 
technology 

tools 








图 52 


下 一 步 ， 他 通过 某 种 程序 算法 调整 了 列表 中 每 一 个 链接 的 字体 大 小 。 链 











接 所 指向 的 内 容 越 受 欢 迎 ， 该 链接 的 字体 就 越 大 。 为 了 强调 字体 大 小 不 











同 ， 他 把 列表 按照 字母 顺序 重新 排序 ， 见 图 5-3。 








TR 
is 


articles 

books 

code 

design 

development 
experience design 
interaction design 
resources 

technology 

tools 
user_experience 
visual_design 








图 5.3 


(D Flickr.com 是 一 个 以 图 片 服务 为 主要 的 网 站 。 它 提供 图 片 存放 、 交 友 、 组 群 、 邮 件 
等 功能 ， 其 重要 特点 就 是 基于 社会 网 络 〈Social Network) 的 人 际 关系 的 拓展 与 内 


容 的 组 织 。 这 个 网 站 的 功能 之 强大 ， 





com/。 译 者 注 











已 超出 了 一 般 的 图 片 服 务 。 网 址 为 http://flickr. 
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然后 ， 他 去 掉 了 列表 项 之 间 的 断 行 ， 使 它们 排列 在 一 起 成 为 如 图 5-4 所 


示 的 一 片 “ 标 签 云 ”。 


























1 于 这 个 系统 既 能 文 持 按 标签 云 的 方式 显示 ， 又 能 按 普通 列表 的 方式 显 
示 ， 因 此 最 后 他 在 界面 下 方 加 上 了 一 个 Cloud 按钮 和 一 个 List 按钮 ， 使 


articles books code design 
development experience design 
interaction design resources technology 
cos USer. experience 


visual design 








图 5-4 


























之 可 以 在 这 两 种 视图 之 间 相 互 切换 。 见 图 5-5。 





articles books code design 
development experience design 
interaction design resources technology 
tools user_experience 


visual_design 


( Cloud ) (tm ) 








乍 看 上 去 这 是 个 很 好 的 主意 。 
C5.1 你 的 创新 是 否 有 效 


这 个 设计 的 创新 之 
有 在 标签 云 中 进行 








处 在 于 它 提供 了 两 种 视图 。 在 此 之 前 ， 别 的 网 站 都 没 
过 这 种 尝试 。 而 且 这 位 设计 师 赞同 的 这 个 想法 是 源 自 




















这 个 模板 开发 者 的 意见 
“程序 员 告 诉 我 用 户 可 能 会 希望 切换 视图 。” 他 说 。 




















经 过 一 番 考 虑 ， 我 
其 硬 要 在 标签 云 里 














认为 应 该 更 注重 于 提高 品质 ， 而 不 是 一 味 地 创新 。 与 
强 塞 入 一 些 所 谓 的 新 贡献 ， 还 不 如 让 它 就 那样 好 好 采 
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着 。 我 们 最 起 码 已 经 把 链接 列表 改善 成 了 标签 云 的 形式 ， 不 是 吗 ? 这 对 
于 提高 品质 来 说 已 经 足够 了 ， 况 且 添 加 儿 个 按钮 也 有 些 画 蛇 添 足 。 


我 想 那 些 知道 标签 云 是 怎么 回 事 的 人 会 从 这 种 视图 中 获得 方便 ， 而 那些 
不 理解 标签 去 的 人 所 看 到 的 仍旧 是 一 个 链接 列表 。 这 种 视图 并 未 使 任何 
人 受 损 ， 也 没有 违反 规则 。 


我 不 认为 用 户 会 在 页 面 中 浪费 时 间 瞪 着 工具 栏 看 半天 ， 然 后 琢磨 到 
底 是 该 用 标签 云 还 是 列表 。 这 里 并 不 是 必须 得 遵循 用 户 习 惯 方式 的 重要 
特性 ， 它 只 是 一 个 简单 的 链接 列表 而 已 。 所 以 我 告诉 那 位 设计 师 去 掉 那 
些 按钮 ， 只 显示 标签 云 就 行 了 。 
我 相信 我 的 观点 是 正确 的 。 但 同时 我 也 相信 当时 自己 考虑 得 还 不 够 透彻 。 
5.1.1 什么 时 候 该 说 不 

很 有 趣 的 是 ， 标 签 云 和 之 前 “环境 的 提示 ”( 我 们 在 第 4 章 讨 论 过 ) 的 概 
念 有 一 点 点 背离 。 单 纯 从 技术 上 来 说 ， 它 们 起 到 的 功能 和 第 4 章 中 排序 
的 链接 列表 一 样 ， 通 过 视觉 上 的 不 同 来 传达 更 多 的 含义 。 但 是 使 用 标签 
云 需 要 一 个 前 提 ， 而 第 4 章 的 排序 列表 却 不 需要 。 


那 就 是 知识 。 


如 果真 正 想 从 标签 云 中 获得 方便 ， 就 需要 先 弄 明白 为 什么 有 些 链 接 比 其 
他 的 要 大 ， 或 者 比 其 他 的 颜色 深 。 而 这 些 问题 就 颇 值 得 商 梭 了 。 


我 观察 过 的 绝 大 部 分 用 户 在 碰 到 标签 云 的 时 候 ， 都 不 明白 为 什么 有 些 链 
接 比 其 他 的 要 大 。 只 有 极 少 数 的 人 才 会 去 猜 它 的 原因 ， 而 其 中 又 只 有 更 
少 的 一 部 分 人 真正 在 乎 这 一 点 。 而 即使 单 击 了 某 个 标签 也 无 法 增进 他 们 
的 理解 。( 顺 便 说 一 句 ， 以 上 是 我 非 正式 的 观察 结果 ， 非 常 欢迎 不 同 的 观 
察 结论 。 如 果 我 错 了 ， 请 务必 告诉 我 ! ) 


这 个 事实 意味 着 你 完全 可 以 抛弃 标签 云 的 形式 。 毕 竟 ， 用 户 也 确实 没有 
必要 理解 它 理 涵 的 逻辑 意义 。 他 们 最 终 还 是 得 到 了 一 个 链接 列表 ， 不 是 
n 
从 技术 上 来 说 ， 是 这 样 的 。 但 是 标签 链接 一 般 来 说 都 很 得， 基本 上 只 包 
括 一 到 两 个 单词 ， 而 且 很 少 能 把 它们 自身 的 含义 表述 清楚 。 


以 上 所 有 这 些 事实 告诉 我 们 ， 几 乎 没有 多 少 人 能 真正 明白 标签 云 的 含义 。 
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我 和 那 位 设计 师 说 用 户 不 会 花 时 间 关 心 如 何 个 性 化 显示 那 一 组 链接 ， 我 
只 对 了 一 半 。 


当然 ， 他 可 以 在 这 个 标签 部 分 加 上 明确 的 标题 ， 例 如 “最 受 欢 迎 的 主 
题 *。 他 也 可 以 加 上 一 些 说 明 性 文字 告诉 用 户 链 接 所 指向 的 内 容 越 受 欢 
迎 ， 该 链接 的 字体 就 越 大 。 


但 是 ， 我 应 该 告诉 他 直接 把 整个 标签 云 去 掉 ， 仅 仅 显 示 一 个 短 列 表 ， 抽 
照 受 欢 迎 程度 排序 即 可 。 为 什么 呢 ? 


因为 在 这 个 世界 上 不 存在 任何 理由 强迫 用 户 思 考 ， 无 论 对 于 一 个 页 面 、 
个 场景 ， 还 是 一 个 博客 模板 。 


我 们 没有 理由 要 求 用 户 学 习 了 解 为 什么 有 些 链接 比 其 他 的 要 大 。 用 户 也 
没有 理由 被 迫 花 精力 去 学 习 标 签 云 ， 更 不 用 说 去 探究 它 的 重要 性 了 。 


Flickr 的 用 户 经 常会 上 传 大 量 图 片 以 便 和 家 人 及 朋友 们 分 享 。 而 在 
LibraryThing"， 一 个 图 书 编目 网 站 ， 用 户 会 为 自己 的 图 书 归 档 并 编制 目 
录 。 在 这 些 例子 中 ， 标 签 云 确实 有 助 于 用 户 学 习 曲 线 的 升 高 。 它 能 让 用 
户 粗略 地 看 到 人 们 是 如 何 使 用 网 站 的 ， 并 且 为 他 们 快速 地 提供 评估 信 
息 。 但 是 对 于 博客 来 说 ， 大 部 分 浏览 者 只 会 短暂 地 逗留 ， 看 一 两 篇 日 
志 ， 然 后 就 离开 。 所 以 ， 博 客 绝对 不 是 一 个 强迫 用 户 学 习 新 潮 交互 方式 
的 好 地 方 。 


如 同 刚 才 所 说 的 ， 用 户 只 会 在 页 面 短 暂 地 逗留 ， 而 不 会 考虑 如 何 个 性 化 
设置 链接 的 显示 方式 。 我 也 从 来 没 看 到 过 哪 位 用 户 会 在 第 一 次 碰 到 标签 
云 的 时 候 花 时 间 学 习 它 的 功能 特性 。 往 好 了 说 ， 它 会 迫使 用 户 在 不 必要 
的 地 方 思考 ;而 往 坏 了 说 ， 用 户 很 可 能 因此 而 困惑 ， 甚 至 烦恼 。 
这 才 是 我 当时 应 该 告诉 那 位 设计 师 的 结论 。 


不 过 我 想 ， 我 现在 已 经 告诉 他 了 。 





































































































































































































































































































(D LibraryThing 是 一 个 专注 于 书籍 的 社会 化 网 络 ， 在 功能 上 和 国内 的 豆 辩 早期 有 些 类 
似 。 该 网 站 有 着 比较 出 色 的 书籍 检索 功能 ， 用 户 能 彼此 分 享 读 过 、 正 在 读 或 喜欢 
的 书籍 。 网 址 为 http://www.librarything.com/。 该 网 站 的 标签 云 页 面 见 http://www. 
译 者 注 


























librarything.com/tagcloud.php. 
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前 儿童 我 们 介绍 了 页 面 布局 、 

















月 标 、 站 点 导航 ， 甚 至 还 包括 如 何 创 


5.1.2 ”如 果 你 不 是 解决 方案 的 一 部 分 …… 
品牌 
导向 。 











建 环境 的 提示 来 协助 用 户 获得 














然而 ， 创 造 良好 的 第 一 印象 还 需要 时 刻 知道 什么 该 展现 ， 什 么 又 不 该 展 


























现 ， 要 有 取舍 。 当 时 那个 博客 模板 的 标签 云 就 是 由 于 我 自己 所 导致 的 失 
误 ， 而 它 对 今天 的 用 户 可 能 仍旧 有 影响 。 不 过 ， 尽 管 这 件 事 让 我 很 难受 ， 












































时 难免 仍 会 误 入 歧途 。 






































最 重要 的 是 我 们 需要 不 断 地 
设计 正 逐 步 向 自己 的 预期 靠拢 
设计 绝 不 包含 任何 运气 成 分 。 
传达 个 性 的 元 素 ， 这 其 中 的 
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但 我 意识 到 一 个 人 是 不 可 能 知道 所 有 事情 的 。 设 计 是 一 个 永 无 止境 的 学 
习 过 程 一 一 总 有 更 多 的 东西 得 去 认识 一 一 而 且 不 管 我 们 有 多 么 渊博 ， 有 











9 我 检验 做 事情 的 方式 ， 尽 可 能 确保 所 做 的 





一 个 网 站 的 外 观 、 版 式 布局 、 导 航 结构 、 
F 何 一 项 ， 乃 至 颜色 和 学 体 的 使 用 方式 ， 对 
于 第 一 印象 《以 及 随后 的 效果 ) 而 言 都 至 关 重要 。 它 们 都 需要 我 们 有 明 




















确 的 目标 ， 进 行 针 对 性 的 设计 
我 们 的 网 站 和 产品 。 


|， 才 能 传达 








E 确 的 信息 ， 而 用 户 才 会 信任 








我 们 将 在 第 6-8 章 中 看 到 ， 仪 仅 这 些 还 远 远 不 够 。 即 使 如 文本 那样 简单 












































的 东西 ， 也 同样 会 影响 用 户 对 我 们 的 看 法 、 对 产品 的 理解 ， 以 及 他 们 在 





网 站 的 辟 留 时 间 和 对 产品 持续 





再 怎样 强调 都 是 不 过 分 的 。 设 计 中 不 要 留任 何 漏洞 。 





每 件 事 都 很 重要 。 


使 用 的 时 间 。 
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48 第 二 部 分 学 习 








你 是 否 见 到 过 那 种 占据 网 页 顶部 大 量 篇 幅 ， 却 又 只 又 长 让 人 根本 不 愿 理 
BRBUABROCE? 是 否 遇 到 过 要 求 你 确认 是 否 取消 操作 的 对 话 框 ， 却 被 迫 
在 “取消 ”和 “确认 ”两 个 模棱两可 的 选项 间 徘 徊 不 定 ? 是 否 遇 到 过 那 
种 连 一 点 说 明 都 没有 的 复 选 框 ， 而 必须 自己 去 揣摩 、 猜 测 各 个 选项 的 意 


思 ? 


绝 大 多 数 网 络 用 户 都 碰 到 过 这 些 情 况 。 


这 些 文字 说 明和 界面 中 其 他 任何 元 素 同等 重要 。 而 且 在 大 多 数 情况 下 ， 
用 户 必须 依赖 这 些 文字 说 明 。 


在 试图 理解 某 个 网 站 ， 或 者 考虑 如 何 完成 某 项 任务 的 瞬间 ， 页 面 中 的 文 
字 将 直接 影响 我 们 对 这 个 网 站 的 信心 。 结 果 是 我 们 要 么 爱 上 这 个 网 站 ， 
要 么 从 此 敬而远之 。 


好 的 文字 可 以 解释 开发 者 的 用 意 ， 说 明 产 品 的 好 处 ， 还 能 介绍 使 用 方法 ; 
反之 ， 不 好 的 文字 则 会 把 用 户 搞 得 头 昏 脑 胀 ， 被 迫 靠 猜 测 做 决定 ， 这 很 
可 能 会 使 他 们 犯 下 错误 ， 然 后 责怪 自己 。 


人 们 使 用 我 们 的 产品 时 ， 他 们 所 知道 的 一 切 都 来 自 于 我 们 所 告诉 他 们 的 
东西 。 因 此 ， 我 们 的 职责 是 给 出 正确 的 信息 ， 而 且 要 尽 可 能 简明 清楚 。 
哪怕 是 简单 到 把 名 词 改 成 动 宾 词 组 ， 或 者 是 开门 见 山 的 几 句 话 ， 都 将 会 
深刻 地 影响 用 户 对 我 们 网 站 的 看 法 。 而 当 文字 无 法 达到 目的 时 ， 我 们 还 
可 以 通过 其 他 方式 来 解决 问题 。 

在 下 面 的 3 个 故事 中 ， 我 们 将 探讨 如 何 更 清晰 明了 地 与 用 户 沟通 。 首 先 
通过 头 两 个 故事 讨论 如 何 修改 文字 以 便 传达 更 多 的 含义 ， 而 在 第 三 个 故 
事 中 我 们 则 讨论 当 文字 无 法 胜任 时 ， 如 何 使 用 视频 来 弥补 。 







































































我 曾经 与 一 个 小 型 的 在 线 教育 软件 公司 合作 为 东家 知名 航空 公司 开发 一 























套 学 习 管 理 系 统 (Learning Management System，LMS )。 这 套 系 统 能 让 
了 解 最 新 的 安全 措施 ， 同 时 党 








该 公司 各 机 场 数 以 干 计 的 工人 随时 学 习 并 














握 新 技术 以 提高 自身 的 技能 水 平 。 














这 些 工 人 中 绝 大 部 分 都 没有 接受 过 大 学 教育 ， 因 此 人 力 资源 部 门 认为 所 




















有 的 内 容 都 必须 为 他 们 提供 透彻 的 解释 。 

















bg 





[zn 











的 施舍 意味 ， 但 是 在 评审 设计 的 时 候 它 反而 帮 了 我 的 忙 。 


C6.1 为 什么 说 欢迎 辞 没 有 用 


该 系统 首页 设计 包括 一 大 段 文字 作为 欢迎 辞 。 




















XP 

















指定 课程 ， 从 而 帮助 他 们 学 习 新 知识 
6-1. 








它 解释 说 明 用 户 可 以 在 
放 且 了 解 最 新 安全 规 草 。 见 


H 
尽管 这 个 想法 颇 有 些 自以为是 


线 
图 
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Welcome! 


Welcome to the BigJet Course Finder! Here, you can locate courses in various 
areas of interest. With these courses, you can improve on your current skill set, 
explore other types of positions in tne company, study for certification exams, 
review safety procedures, and even learn new skills. 


To get started, just browse through the course finder interface below, then choose a 
course and follow the instructions. If you choose a graded course, your score will 
be submitted to Human Resources as soon as you're done. That's all there is to it! 

















图 6-1 
^ 


我 敢 肯 定 你 在 网 上 看 到 过 类 似 的 信息 起 码 有 一 百 万 次 了 。 但 有 多 少 次 
去 读 过 呢 ? 


Jakob Nielson 在 他 的 Alertbox 专栏 "“ 上 废话 文本 : 保留 、 删 减 还 是 去 
ju? ”2 一 文中 指出 ， 人 们 通常 不 会 在 网 页 上 阅读 文字 ， 他 们 只 是 扫描 。 
如 果 是 更 长 的 介绍 性 文字 ， 人 们 往往 会 直接 忽略 。 也 就 是 说 ， 篇 幅 短 的 
文字 才 有 可 能 吸引 一 部 分 注意 力 〈 假 设 它 真 的 有 用 )， 从 而 有 助 于 用 户 理 


d 
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(D Jakob Nielson 是 尼尔森 - 诺 曼 集团 的 主要 负责 人 之 一 ， 在 Web 可 用 性 领域 内 被 
公认 为 世界 的 权威 。 他 的 作品 很 多 ， 包 括 畅销 全 球 的 Designing Web Usability 一 
书 。 他 的 Alertbox 专栏 于 1995 年 开始 在 互联 网 上 发 布 ， 网 址 为 http://www.useit. 
com/。 一 一 译 者 注 

@) 这 篇 文章 英文 名 为 “Blah-Blah Text: Keep, Cut, or Kill?”， 原 文 见 http://www.useit. 


com/ alertbox/ intro-text.html。 一 一 译 者 注 
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62 为 扫描 而 设计 — 51 
解 他 们 正在 看 什么 。 
在 大 信息 量 的 站 点 里 我 们 会 专注 于 阅读 ， 然 而 当 探索 一 个 新 的 Web 应 用 
星 序 时 则 与 之 相反 。 我 们 会 寻找 那些 显赫 的 线索 ， 目 的 是 为 了 了 解 这 个 网 
站 是 干什么 的 ， 它 是 如 何 运 转 的， 以 及 弄 明 白 要 想 使 用 它 ， 我 们 需要 做 什 
么 事情 。 换 句 话说 ， 我 们 考虑 的 是 做 ， 而 不 是 读 。 我 们 希望 将 事情 搞定 ， 
因此 采取 的 每 一 个 步骤 都 是 为 了 完成 某 件 事情 ， 不 管 这 件 事情 是 什么 。 
比如 说 ， 看 到 这 个 欢迎 辞 的 时 候 ， 我 立刻 绕 过 它 ， 把 注意 力 集中 在 课程 
列表 中 去 。 屠 才 是 这 个 页 面 最 主要 的 交互 元 素 。 


C6.2 为 扫描 而 设计 


不 过 最 后 我 还 是 扫 了 一 眼 欢迎 辞 ， 因 为 评审 这 个 设计 是 我 的 工作 。 但 是 
当 我 扫 过 这 些 文字 的 时 候 ， 看 到 的 是 如 图 6-2 所 示 的 内 容 。 
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Welcome! 


Blah blah blah blah blah blah blah blah blah blah blah locate courses blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah. 


Blah blah blah blah blah blah blah blan course finder blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah! 














图 62 
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È HA 





你 阅读 欢迎 辞 时 所 看 到 的 内 容 大 概 与 此 非常 相似 。 我 们 更 感 兴 趣 的 是 要 


完成 什么 














攻 情 ， 而 不 是 阅读 一 段 毫 无 目的 、 对 达成 目标 毫 无 帮助 的 文字 。 


第 一 个 问题 就 出 在 这 段 文字 的 标题 是 “欢迎 ”， 这 就 好 像 公司 在 某 个 节 假 
日 派对 上 打开 办 公 室 的 大 门 迎接 客人 。 但 是 这 里 不 是 个 节假日 派对 ， 而 


是 个 网 站 。 


浏览 者 们 也 并 不 是 客人 ， 而 是 有 好 多 工作 要 忙 的 人 。 他 们 为 


了 完成 公司 规定 的 安全 课程 中 断 自 己 的 正常 生活 ， 或 者 为 了 获得 升 职 的 
机 会 而 被 迫 学 习 某 项 新 技术 。 


他 们 并 不 关心 自己 是 否 受 欢 迎 ， 他 们 关心 的 是 找到 某 个 课程 。 


所 以 首先 ， 














让 我 们 给 他 们 一 些 自信 ， 把 标题 改 成 Find a course 〈 找 到 你 的 


课程 ) 可 以 让 他 们 知道 自己 打开 了 正确 的 页 面 。 见 图 6-3。 








Find a course 


Blah blah blah blah blah blah blah blah blah blah blah locate courses blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah. 


Blah blah blah blah blah blah blah blan course finder blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah! 














图 6-3 


好 多 了 。 但 是 那 一 大 段 思春 的 文字 还 在 那儿 ， 我 们 来 把 它 变 得 更 有 用 一 些 。 


“ 赶 


“赶快 行动 ”词组 是 用 来 激发 人 们 做 
种 命令 Zo 


快 行动 ”词组 
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上 茶 种 行为 的 一 组 字 词 。 它 近似 于 一 
比如 “ 回 你 的 房间 去 ” 但 又 不 会 那么 缺乏 友善 。 





你 曾经 见 过 它们 ， 可 能 也 不 少 于 一 百 万 次 了 。 它 们 一 般 被 陈述 成 这 样 : 
“保存 更 改 ”“ 赔 读 更 多 ”以 及 “登录 网 站 ”。 


"e 


同时 还 








] 还 易于 扫描 。 因 为 使 ) 











Ja mH S 














使 用 





Find a course 作为 页 





干 些 什么 ， 


因此 下 一 步 我 们 需要 去 掉 这 些 文字 ， 然 后 用 更 简练 、 明 确 的 话 奉 代 ， 并 
且 在 里 面包 含 “ 赶 快 行动 ”的 陈述 。 

















标题 能 够 





E 够 准确 地 告诉 用 户 即 将 发 生 什么 ， 





能 让 他 们 感到 自己 才 是 软件 的 指挥 者 。 





帮助 用 户 了 解 在 这 个 页 面 上 他 们 要 





























但 是 那 一 大 堆 文 字 却 没 能 提供 多 少 具 体 的 内 容 。 


























在 这 个 案例 中 ， 要 想 解 释 页 面 的 主要 目的 ， 我 要 使 用 的 文字 连 一 个 段落 
都 不 到 。 很 多 时 候 所 需要 的 仅仅 只 是 一 句 话 而 已 ， 在 解释 你 在 页 面 中 能 


干什么 的 同时 就 


经 过 慎重 考虑 
| AURABUCTEROH M. MESH ERE Rn. MG. 
































Find a course 





E 说 明 它 的 目的 、 好 处 和 使 用 方法 。 


我 开始 设法 扭转 现 有 的 局 














Locate a course, then click its title to get started. 














54 — 63x 开门 见 山 
非常 好 。 做 到 这 样 也 并 不 困难 ， 不 是 吗 ? 

新 的 页 面 版 本 直入 主题 ， 这 样 我 们 不 会 浪费 用 户 的 任何 时 间 。 
但 不 幸 的 是 ， 事 情 并 不 那么 简单 。 


客户 不 愿意 放弃 欢迎 辞 里 面 的 文学 。 很 显然 ， 市 场 部 的 某 个 人 为 了 它 璋 
精 竟 虑 ， 而 且 确实 花 缆 了 相当 多 的 时 间 考 虑 如 何 让 措辞 完美 。 


“如 果 用 户 需 要 更 多 的 信息 怎么 办 ? ”他们 问 道 。 
“他 们 不 会 。” 我 回答 。 
这 种 争论 似乎 无 法 得 出 合适 的 结论 。 
结束 这 场 争论 的 却 是 这 样 一 句 话 : 
“这 些 人 只 有 高 中 文化 水 平 ， 如 果 他 们 读 了 这 些 我 才 会 吃惊 呢 。”( 咖 嘿 


冷笑 ) 

































































































































































































































































该 公司 人 力 资源 部 门 对 自己 员工 智能 水 平 的 判断 ， 我 对 其 完全 持 保 留 态 
度 。 然 而 这 样 一 来 事情 变 得 好 像 缩减 文本 成 了 他 们 的 主意 。 

他 们 采用 了 我 的 设计 。 而 且 据 我 所 知 ， 该 网 页 从 没有 出 现 过 人 们 不 知 如 
何 使 用 或 者 不 明白 它 能 做 什么 等 方面 的 问题 。 

从 这 一 课 我 们 能 学 到 什么 ? 

对 用 户 来 说 ， 一 个 简短 的 句子 远 比 一 大 段 文字 要 来 得 有 意义 ， 即 使 这 段 


文字 的 文笔 很 好 。 重 要 的 并 不 是 我 们 提供 的 信息 量 有 多 大 ， 而 是 我 们 能 
和 否 给 他 们 提供 真正 需要 的 信息 。 
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最 近 我 为 一 家 在 线 教学 软件 公司 的 产品 做 可 用 性 评 
T Web 的 课程 创建 工具 ， 已 经 是 第 二 个 版 本 了 。 


这 款 产 品 主要 为 在 线 教学 系统 的 开发 者 设计 。 比 较 庚 悉 在 线 教学 课件 以 
及 成 绩 跟踪 系统 的 人 可 以 通过 这 个 工具 选择 模板 、 创 建 幻 灯 片 ， 从 而 在 
较 短 的 时 间 内 创建 好 自己 的 课程 。 用 户 要 做 的 是 开设 某 个 新 课程 ， 创 建 
所 需要 的 幻灯 片 并 为 其 选择 模板 ， 然 后 填写 一 些 表单 以 便 为 每 张 幻灯 片 
添加 内 容 。 


当 我 评审 这 个 应 用 程序 的 时 候 ， 脑 子 里 经 常 出 现 一 个 念头 ， 认 为 它 完 
可 以 面向 更 多 的 受众 群体 。 只 需要 一 些 相对 简单 的 调整 ， 这 个 产品 就 能 
适用 于 培训 设计 师 、 人 力 资 源 部 门 以 及 更 多 的 人 ， 而 不 仅仅 只 是 面向 熟 
知 在 线 教学 课程 开发 的 专业 人 士 。 

自然 ， 扩 大 了 用 户 群 也 就 意味 着 能 为 公司 带 来 更 多 的 利润 。 不 出 所 料 ， 
客户 非常 赞同 这 个 想法 ， 因 此 我 把 自己 的 评审 意见 更 多 地 集中 在 如 何 实 
现 这 一 点 上 面 。 

由 创建 课程 的 界面 开始 ， 在 这 里 用 户 需 要 填写 课程 ID 和 标题 ， 然 后 选择 
一 系列 选项 来 建立 新 课程 。 如 图 7-1 所 示 。 
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New Project Course Properties 
New project ID Title 
Tracking Options 
Choose ... (.] Narration button [.] Exit button 
£) Glossary button [-] Audio button 
Course completon (£) Page numbering [-] Persistent index 
El [.] Use index tooltip [£] Use course logo 
Page transition 
Choose ... B 
Transition time 
Transition direction 
Choose ... t 
图 7-1 
因为 我 完全 不 知道 应 该 如 何 填写 有 效 的 课程 ID， 所 以 我 输入 了 My 























Project。 完 成 表单 之 后 ， 得 到 了 如 图 7-2 所 示 的 一 个 错误 信息 。 








Error 





The project id "My Project" is invalid. 














ID 看 起 来 应 该 是 个 什么 样子 ? 


这 个 界面 “假设 ”我 具备 很 多 相关 经 验 。 它 上 





于 这 种 “假设 ”之 上 的 。 
停止 标记 你 的 “假设 ” 


互联 网 上 存在 着 无 数 缺 少 上 下 文 语 境 的 输入 栏 、 复 选 框 和 单 选 按钮 。 它 


07.1 


们 要 求 月 











图 7-2 
"R, 谢谢。 但 是 为 什么 它 会 无 效 呢 ? 我 怎样 才能 使 之 有 效 ? 有 效 的 课程 




















面 所 有 控件 的 标记 都 是 基 











昌 户 输入 、 选 择 ， 却 不 解释 这 些 行为 的 含义 。 


我 们 经 常 自以为是 地 猜测 用 户 对 产品 的 理解 程度 。 当 我 们 在 某 个 复 选 





Newproject ID 〈 新 课程 ID ) 的 时 候 ， 总 是 在 假设 用 户 会 明白 我 们 的 意思 。 


7.1 停止 标记 你 的 “假设 ” ”57 


框 后 面 写 上 Persistent index (持久 索引 )， 或 者 在 某 个 输入 栏 旁 边 写 上 





我 们 先 做 假设 ， 然 后 去 标记 这 些 “ 假 设 ”。 


就 在 这 个 界面 中 ， 其 实 我 们 是 在 要 求 用 户 为 了 使 | 
知道 一 些 只 有 我 们 才 知 道 的 事情 。 我 们 要 求 















































我 们 的 软件 ， 他 们 必须 
] 户 必须 先 撕 测 我 们 的 心思 。 

















如 果 用 户 失败 了 ， 我 们 还 经 常 因此 而 责怪 他 们 。 难 道 这 不 是 很 搞笑 吗 ? 


现在 告诉 你 如 何 修正 这 个 问题 。 





检查 应 用 程序 中 每 一 个 控件 的 标记 ， 并 





程序 的 人 是 否 也 能 明 

















问 问 自 





己 ， 一 个 从 没 见 过 这 个 








白 它 的 意思 。 把 所 有 回答 是 














个 清 


“不 ”的 项 目 列 














单 ， 要 么 修改 这 些 标记 使 其 变 得 通俗 易 懂 ， 要 么 加 上 说 明 元 素 〈 文 本 、 
屏幕 截图 、 小 短片 等 ) 解释 它们 。 














把 所 有 回答 为 “是 ”的 项 
没 接触 过 这 个 程序 的 人 看 。 



































目 同样 也 列 一 个 清单 ， 








根据 他 们 看 的 情况 ， 佑 计 你 还 得 再 改 儿 条 。 

















不 过 ， 








€ 





j 不 着 难受 。 今 天 早 些 时 候 我 自己 的 列表 3 











并 把 这 个 














单 给 3 个 从 









































至 于 前 面 说 的 可 用 性 评审 ， 一 开始 我 为 课程 ID 提出 了 简单 的 改进 建议 ， 只 


是 加 上 了 一 点 文字 ， 显 示 有 效 的 课程 ID 应 该 是 什么 样子 。 见 图 7-3 左 侧 。 








有 E 面 都 至 少 改过 3 条 呢 。 







































































New Project Course Properties 
New project ID Title 
No spaces (e.g. "MyProjectID") 
| Options 
Tracking £ Narration button [.] Exit button 
[Choose ... < 国 Glossary button 国 Audio button 
Course completion 一 died ery 一 naa 
[ G E z se index tooltip se course logo 
Page transition 
Choose ... i 
Transition time 








Transition direction 
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第 一 步 近 出 来 之 后 就 很 简单 了 ， 我 只 需要 把 这 个 想法 扩展 到 界面 其 余 的 





控件 上 面 去 。 























首先 ， 为 大 部 分 控件 加 上 相关 帮助 文档 的 链接 。 其 次 ， 为 各 输入 栏 加 上 
说 明 性 文字 ， 解 释 什 么 样 的 输入 才 是 有 效 的。 最 后 ， 修 改 几 处 标记 ， 使 
它们 的 意义 表达 得 更 为 清楚 。 例 如 ，Transition time (切换 时 间 ) 变 成 了 
Transition time, in seconds (切换 时 间 ， 单 位 : 秒 )。 见 图 7-4。 


New Project 


New project ID 
No spaces (e.g. "MyProjectlD") 





Course Properties 


Title 
This will appear in the published course. 

















Tracking method (wnats this?) 


Options 





[-] Narration button (?) [£] Exit button (7) 





Course completion (Wnats this?) 

















[.] Glossary button () | ] Audio button (7) 
[.] Page numbering(? [£] Persistent index (?) 
(£) Useindextooltip(?; [ ) Use course logo (7) 


Page transition (7) 
Choose ... ` 














Transition time, in seconds (What's tnis?) 
eg. 1.5 











Transition direction (wnats this?) 








Choose ... m 














图 7-4 


设计 不 能 只 基于 我 们 自己 一 大 情愿 的 “假设 ”。 相反， 我 们 需要 假设 用 户 
毫 不 了 解 我 们 的 软件 ， 随 后 给 他 们 足够 的 信息 以 便 帮 助 他 们 理解 。 


说 明 性 文字 、What's this?( 这 是 什么 ?”) 链接 以 及 表意 清楚 的 标记 都 能 


达到 这 一 目的 。 
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我 大 部 分 的 工作 都 是 在 指导 别人 如 何 能 让 事情 变 得 一 目 了 然 。 但 是 偶尔 
我 自己 也 会 有 那 种 突然 被 内 电击 中 的 感觉 一 有些 过 于 明显 的 东西 我 却 
一 直 视 而 不 见 。 


有 一 次 我 为 某 款 产品 做 可 用 性 评审 ， 就 发 生 过 这 样 的 情景 。 


那天 我 发 现 自己 正在 绝望 地 试图 用 书面 文字 来 解释 在 某 个 表单 中 一 个 输 
入 栏 的 问题 ， 它 没有 向 用 户 说 明 自 己 有 字数 限制 。 这 个 输入 栏 里 面 只 能 
输入 50 个 字符 ， 但 却 没有 相关 的 说 明 。 因 此 当 达 到 字数 限制 时 ， 新 输入 
的 字符 就 不 再 显示 了 。 这 看 上 去 就 好 像 我 的 键盘 突然 失 录 了 一 样 ， 我 敲 
击 键盘 没有 任何 反应 。 


那天 我 绞 尽 脑汁 想 把 措 词 整理 得 顺 当 一 点 ， 以 便 把 这 个 现象 说 清楚 。 我 
想到 过 是 否 该 使 用 一 两 张 屏幕 截图 ， 但 那 又 有 什么 用 呢 ? 客户 通过 这 些 
截图 所 能 看 到 的 只 是 一 个 里 面 满 是 字符 的 输入 栏 而 已 。 它 们 无 法 表现 出 
屠 种 键盘 失灵 时 的 无 力 感 和 挫败 感 。 











































































































































































































































































































我 又 想 是 否 可 以 把 每 一 步 都 写 出 来 ， 把 整个 过 程 描述 一 壳 。 但 是 那样 似 
乎 工作 量 会 很 大 ， 而 且 如 果 连 简单 的 措 词 都 不 能 使 自己 满意 的 话 ， 就 更 
不 能 指望 写 一 大 堆 步 又 能 好 到 哪里 去 了 。 

而 就 在 这 时 那 道 内 电 出 现 了 。 




















视频 ， 你 这 个 白痴 。 视 频 ! 





Ex 
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视频 演示 胜 过 干 言 万 语 


视频 演示 片段 ， 也 就 是 大 家 所 说 的 Screencast”， 现 在 已 经 应 用 到 各 种 网 
站 中 去 了 。 这 可 能 是 因为 创建 网 络 视频 文件 变 得 越 来 越 容易 吧 。 


比如 在 Basecamp ? (H 37signals 开发 ) 里 面 ， 每 一 个 “空白 页 ”( 用 户 
尚未 创建 内 容 的 页 面 ) 都 提供 了 一 个 Screencast， 如 图 8-1 所 示 。 








这 就 是 Screencast 其 中 一 项 伟大 


257 








的 用 途 ， 

















而 且 相 当 到 位 。 








在 用 


"需要 的 

















瞬间 ， 他 们 


FR 


TH 














频 

















VAT 





CD Screencast 这 一 网 络 术语 尚 无 一 个 公认 的 中 文 译 和 名。 及 
屏幕 录制 软件 制作 的 视频 文 伯 
以 达到 娱乐 或 者 
屏幕 输出 的 
尽管 Screencast 这 个 名 词 在 2004 年 才 出 











人 使 用 
到 网 上 共享 ， 
“Screencast 是 一 种 计算 机 
也 的 音频 。 





uu 














6156 — Fe SOR PE RE 


ScreenCam 般 的 产品 在 1994 年 


I 


行 编辑 也 很 受 限制 。 
支持 更 多 的 编辑 操作 


fU 
, ff 





T 














能 很 快 地 学 会 如 何 使 
理 客户 项 目 。 大 多 数 客户 都 是 第 一 次 使 用 Basecamp， 但 是 有 这 些 视频 能 
助 他 们 很 快 上 手 ， 这 真是 一 件 令 人 安心 
而 超越 这 一 功能 并 且 名 声 大 振 的 则 是 Common Craft Show ?里 
。 这 些 短片 本 质 上 来 说 并 不 是 Screencast， 
象 ， 但 却 能 非常 生动 、 活 泼 地 介绍 一 些 新 的 或 经 常 为 大 众 所 误 





用 这 个 程 














序 。 我 经 常 使 夺 











] Basecamp 来 管 


f 
EA 

















的 事情 。 








大 


























EF， 通过 某 种 方式 


^ 





教学 、 





数字 记 


示范 的 

















的 。 其 
录 ， 也 被 称 为 是 




















=] 








图 是 用 户 屏 幕 的 














看 到 的 一 段 影片 。” 具 体 页 




















JE 
(2) Basecamp 是 一 个 基于 Web 
分 配 任务 、 发 表意 见 或 反 
basecamphq.com/. 
®© EX Web 2.0 fi 

















" 


[a 








Ius 


页 、 
译 者 注 
经 典 网 站 ，37signals 

的 工具 而 闻名 天 下 。 网 址 为 http://www.37signals.com/。 
(4) Common Craft Show 是 Common Craft 公司 日 


图 ， 只 有 夫妇 二 人 。 如 他 们 自己 所 说 ， 公 司 








即 已 开始 使 





的 项 目 管理 和 协作 工具 。 


安排 日 程 、 








片 ， 那 么 Screencast 本 质 上 就 是 用 户 在 他 们 监视 器 上 所 
i WW http://en.wikipedia.org/wiki/Screencast。 一 一 译 者 注 


Ii Screencast 指 的 是 一 种 
通常 是 Flash 格式 文 
在 英文 维基 中 的 解释 如 


。 早 期 产品 生成 很 大 的 文件 ， 对 其 进 
能 支持 更 为 简洁 的 文件 格式 ， 如 Adobe Flash, 
如 改变 顺序 、 和 鼠标 路 径 追 踪 ， 以 及 音频 等 。 如 果 说 
张 静 态 图 





H 

















创建 的 视 








为 它们 并 不 是 电脑 屏幕 录 








解 的 技术 。 


8-2 中 的 这 个 视频 探讨 的 是 小 型 节能 荧光 灯 管 。Common Craft 也 创建 
过 关于 维基 百科 、RSS， 甚 至 在 线 图 片 分 享 等 方面 的 视频 。 


个 
放 

下 : 
它 通常 
Il Lotus 


UE» 








W, HU 








并 且 
HR 





R2 


并 
































网 络 共享 文件 等 。 





大 














用 户 可 以 通过 互联 网 写作 并 








网 址 为 http://www. 





为 开发 了 Ruby on Rails 和 一 系列 基于 Web 





译 者 注 














油性 笔 和 纸 片 制作 各 种 视频 短片 让 复杂 的 事物 变 得 容易 理解 。 


commoncraft.com/。 一 一 译 者 注 





4 网 络 展览 项 目 。 该 公司 位 于 美国 西 牙 
的 产品 就 是 “解释 ”。 











该 夫妇 使 用 白板 、 
网 址 为 http://www. 
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Make lists, add items, and check them off. Get things done with to-do lists. 





Learn about to-do lists: Watch a video demo below 
r 


You can watch this video or view a screenshot any time from 








theconmoncraftshow 


Video: New Light Bulbs in Plain English 





Be Notified of Our 
Next Video 





Via RSS Subscription... 
Sg 
or Emal 








图 8-2 
这 些 视 频 其 实 需要 艰辛 繁琐 的 制作 过 程 。 制 作者 需要 在 白板 上 创建 一 系 








列 图 画 ， 并 且 为 这 里 面 的 每 一 幅 图 画 的 每 一 个 步骤 进行 叙述 性 的 拍摄 ， 
此 外 讲述 者 还 需要 手绘 一 些 漫画 作为 补充 。 这 些 视 频 的 目的 是 讲述 那些 
技术 是 如 何 工作 的 并 且 给 人 们 带 来 了 什么 好 处 。 


8.1.1 使 用 视频 来 表述 问题 


突然 想起 用 视频 来 传达 信息 的 种 种 好 处 ， 我 意识 到 自己 也 可 以 用 一 个 短 
片 来 向 客户 解释 输入 栏 的 问题 ， 这 样 就 不 需要 再 花 精 力 去 说 明了 。 一 目 
了 然 ， 不 是 吗 ? 
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因此 我 马上 重新 开始 ， 再 次 尝试 在 输入 栏 中 融入 50 个 以 上 的 字符 ， 并 且 



































把 整个 过 程 的 屏幕 都 录 了 下 来 。 与 此 同时 我 也 录制 了 声音 ， 这 样 客户 就 








能 在 看 的 同时 听 到 我 无 济 于 





eoe 








事 地 敲 击 键盘 。 见 图 8-3。 





[8 KeyRepeat.mov 





| Image and Audio Settings 





我 甚至 还 加 入 了 一 点 口头 叙述 以 便 表现 出 在 这 种 情境 下 用 户 可 能 会 想 什 
“我 的 键盘 …… 坏 了 。 没 反应 了 。 我 不 知道 为 什么 。 也 许 它 的 接 
了 …… 不 是 。 也 许 我 是 个 智障 …… 不 是 ， 我 是 个 MBA。 也 许 我 需要 
电脑 。 太 没劲 了 一 一 我 才刚 刚 喜欢 上 这 个 网 站 。 响 ， 好 吧 。” 














图 8-3 














N 


























Tus 
HE 








20 秒 钟 后 ， 一 切 搞定 。 我 重播 了 一 次 ， 以 确保 录制 效果 不 错 。 就 这 样 ， 灵 














光一 内 不 到 一 分 钟 就 解决 了 问题 ， 而 且 比 一 开始 预料 的 要 生动 有 效 得 多 。 


长 








你 很 难 和 视频 去 辩论 什么 。 


就 在 这 次 小 小 的 成 功 之 后 ， 








当 我 把 这 段 视频 和 其 他 评审 意见 发 给 客户 之 后 ， 他 们 明白 了 我 的 意思 。 





















































想法 


8.1.2 ”使 用 视频 来 表述 











我 意识 到 如 果 能 用 视频 来 描述 问题 ， 那 么 也 











同样 可 以 用 它 来 描述 那些 想法 ， 这 和 用 原型 (Prototype) 来 描述 是 一 样 
































的 。 视 频 能 直接 放 到 客户 














自前 让 他 们 看 ， 然 后 让 他 们 思考 ， 然 后 再 看 一 


























裔 。 而 不 需要 任何 解释 。 


























我 可 以 录制 一 段 视频 来 说 明 某 个 交互 应 当 怎 样 发 生 才 最 为 合理 ， 并 且 加 
上 少许 叙述 ， 而 不 用 把 这 些 过 程 全 都 写 出 来 。 这 就 像 一 个 原型 的 视频 版 


本 ， 或 者 说 一 个 Screencast 的 原型 版 本 。 随 即 一 个 词 跳 入 我 脑子 
天 才 。 天 才 啊 ， 伙 计 ! 如 果 你 此 刻 听 到 一 声 小 小 的 “ 哇 哈 哈哈 哈 ” 那 其 



































实 是 我 为 自己 的 才华 得 意 大 笑 的 回声 。 
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一 开始 我 就 像 个 白痴 ， 但 现在 我 得 到 了 补偿 ， 而 且 是 双 倍 的 。 














不 管 怎样 ， 我 立刻 找到 了 这 样 做 的 全 部 理由 ， 并 且 在 我 后 来 旦 交 给 客户 

















的 设计 文件 中 都 会 包含 一 些 视频 演示 片段 。 这 些 
我 大 量 的 时 间 ， 而 且 在 绝 大 部 分 情况 下 ， 它 们 所 
一 步 一 步 的 文字 案例 描述 要 生动 、 丰 富 得 多 。 


08.2 极为 简单 的 视频 演示 艺术 



























































简单 的 屏幕 录像 节省 了 








HESSE E EG n ERR 





为 网 站 创建 视频 演示 片段 或 者 说 是 Screencast， 是 一 个 很 简捷 方便 的 过 











程 。 只 要 你 有 合适 的 工具 ， 并 且 愿 意 花 儿 分 钟 时 间 做 准备 。 





首先 ， 搞 清楚 你 要 传达 什么 内 容 。 在 大 多 数 案 例 中 ， 我 只 想 展 示 交 互动 











作 应 当 怎 样 发 生 ， 因 此 我 所 需要 做 的 就 是 展现 一 
并 且 解 释 在 每 一 个 界面 中 用 户 应 该 做 些 什 么 才能 




















最 后 完成 交互 。 
举 个 例子 ， 为 一 个 五 星 级 的 界面 做 视频 演示 的 时 候 














系列 界面 的 屏幕 状态 
让 达 下 一 个 屏幕 状态 














， 你 需要 展现 的 部 分 


包括 ， 默 认 状态 、 单 击 哪里 来 设置 评级 ， 单 击 之 后 屏 革 上 会 发 生 什么 、 


如 何 完 成 评级 ， 以 及 完成 后 屏幕 是 什么 样 。 这 个 














过 程 看 起 来 很 明确 ， 但 




















这 同时 也 意味 着 需要 通过 某 种 方式 来 创建 一 个 简单 原型 ， 这 样 才 能 通过 


单 击 进入 各 个 状态 。 
































我 更 喜欢 OmniGraffle "， 因 为 我 经 常 使 用 它 并 且 非 常 方便 。 当 然 你 也 可 以 























使 用 Adobe Flash, Microsoft Visio 〈 只 适用 Windows 系统 )、Gliffy2 (ET 














[om 


Flash 的 Web 应 用 程序 ， 与 Visio 很 相似 )， 甚 至 Microsoft PowerPoint. 

















例如 在 Flash 中 ， 你 可 以 创建 一 系列 帧 ， 每 一 帧 都 显示 一 个 不 同 的 屏幕 状 


























态 〈 使 用 线 框图 或 者 高 质量 的 设计 图 稿 )， 然 后 为 





















































每 个 可 点 击 的 项 目 简单 











地 创建 按钮 动作 。 最 后 发 布 文件 并 用 屏幕 录制 工具 记录 下 完成 交互 的 每 





三 个 步 又。 








CD OmniGraffle 是 the Omni Group 公司 的 产品 ， 现 已 发 布 至 第 5 个 版 本 。 它 是 一 款 流 
程 图 及 界面 原型 绘制 软件 ， 界 面 美观 ， 能 支持 Visio 文件 格式 。 但 只 适用 于 Mac 系 

















统 。 网 址 为 http://www. a E 
o e 是 一 款 在 线 绘 4， 用 户 能 使 用 该 软件 绘制 
组 织 图 、 室 内 设计 EUR E 扑 图 等 ， 功 能 强大 。 绘 于 




















En 























igraffle/. 





























译 者 注 
UML 建 模 序列 图 、 流 程 图 、 
让 好 的 作品 可 以 保存 并 发 布 到 














自己 的 Blog 中 。 网 址 为 http:/www.gliffy.com/。 一 一 译 者 注 
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录制 屏幕 时 可 以 使 用 各 种 各 样 的 工具 。 我 使 用 的 是 Snapz Pro x? (Hii 
H Mac 系统)， 录 人 制 影片 时 就 像 屏 幕 截图 一 样 





| 
































简单 。Windows 用 户 可 以 





选择 TechSmith 公司 的 Camtasia Studio2， 操 作 方 式 大 同 小 异 。 
最 新 也 最 酷 的 屏幕 截图 和 录像 工具 则 是 TechSmith 公司 发 布 的 Jing 了。 这 























是 一 款 免 费 软件 ， 见 图 8-4。 

















单 击 儿 次 就 可 以 创建 屏幕 截图 或 者 视 
频 ， 而 得 到 的 文件 可 以 通过 软件 自 
动 赋予 的 URL 地 址 或 者 Screencast. 
com “账号 与 所 有 人 分 享 。 


换 句 话说 ， 录 制 完 一 段 影 片 之 后 ， 你 
可 以 单 击 共享 图 标 把 该 影片 上 传 到 
Screencast.com 中 去 。 你 可 以 粘贴 它 
的 URL 地 址 〈 当 视频 上 传 后 这 个 
URL 会 自动 复制 到 你 的 剪贴 板 中 )， 也 可 
























































运用 文字 显得 困难 时 ， 考 虑 使 用 视频 来 帮助 你 的 月 


























图 8-4 
影片 过 段 时 间 再 发 布 。 
日 户 快 速 上 手 吧 。 








噢 ! 还 有 ， 如 果 人 碰巧 你 在 我 之 前 已 经 想到 了 视频 演示 这 个 主意 …… 别 让 














我 知道 。 我 宁愿 继续 相信 它 是 我 的 独家 发 明 。 


谢谢 。 











(D Snapz Pro 是 一 款 全 能 的 屏幕 截图 软件 。 用 






































复 截 取 不 同 部 分 再 用 Photoshop 拼接 。 

















夺 截 屏 。 其 中 全 窗口 截屏 功能 ps 





户 可 以 设 定 全 屏 、 当 前 窗口 、 自 选区 域 范 
人 而 无 需 使 滑动 条 重 





























各 屏幕 动作 录制 为 QuickTime 影 





片 ， 并 能 同时 记录 系统 内 的 数码 音频 信号 Perle A 网 址 为 http://www. 





ambrosiasw.com/utilities/snapzprox/。 


译 者 注 





(2) Camtasia 能 在 任何 颜色 模式 下 轻松 地 记录 屏幕 动作 ， 包 括 影像 、 音 效 、 鼠 标 移动 轨 
迹 、 解 说 声音 等 等 ， 还 能 对 视频 片段 进行 剪接 ， 添 加 转 场 效 果 ， 并 可 将 电影 文件 
打包 成 EXE 文件 ， 在 没有 播放 器 的 电脑 上 也 能 播放 。 网 址 为 http://www.techsmith. 




















com/camtasia.asp。 一 一 译 者 注 























© Jing 能 够 支持 Mac 及 Windows 系统 ， 在 Windows 下 则 需要 Net 3.0 组 件 支持 。Jing 
集成 了 TechSmith 的 另外 一 项 服务 Screencast( 专门 存储 截屏 文件 的 空间 )， 用 户 可 以 


在 截屏 或 录制 后 直接 把 文 伯 a Screencast 中 ， 同 时 还 
调用 把 视频 内 置 到 自己 的 Blog 里 。 网 址 为 http:/wwwjingprojectcomy。 
D 该 网 站 网 址 为 http://www.screencast.com/。 一 一 译 者 注 

































































能 像 YouTube 那样 通过 代码 
译 者 注 
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把 被 动 的 网 站 浏览 者 转变 为 主动 的 活跃 用 户 其 实 很 简单 ， 只 需要 把 他 们 
的 目标 从 浏览 转变 为 搜索 。 而 且 搜 索 是 人 们 在 互联 网 上 最 基本 而 又 最 重 
要 的 任务 之 一 。Google 告诉 我 们 ， 好 的 搜索 引擎 可 以 让 人 们 在 数秒 钟 之 
内 找到 任何 方面 的 资料 一 一 没有 做 不 到 ， 只 怕 想 不 到 。 


当然 ， 并 不 是 所 有 的 搜索 引擎 都 像 Goosgle 那么 好 用 。 事 实 上 ， 有 很 多 搜 
索引 擎 在 提供 信息 和 人口 方 面 都 做 得 极 差 。 这 并 不 一 定 是 因为 引擎 的 算法 
问题 ， 其 实 有 些 算法 相当 不 错 。 


问题 经 党 出 在 界面 上 。 


事实 是 这 样 的 : 绝 大 多 数 使 用 过 搜索 引 警 的 人 都 用 过 Google， 而 绝 大 
多 数 用 过 Google 的 人 都 把 它 当 作 是 完美 搜索 的 黄金 标准 。 如 果 不 是 
Google， 那 么 就 是 垃圾 。 


在 这 种 情况 下 ， 我 们 该 如 何 竞争 ? 我 们 该 怎样 才能 为 用 户 提 供 他 们 想 要 

的 信息 ， 而 不 是 眼睁睁 看 着 他 们 离 去 然后 打开 Google ? 我 们 该 怎样 帮助 

用 户 快速 找到 正确 的 信息 ? 而 在 用 户 看 到 搜索 页 面 或 搜索 结果 列表 的 时 

刻 ， 我 们 又 该 怎样 帮助 他 们 快速 上 手 ? 

为 了 回答 这 些 问 题 ， 我 要 讲 3 个 故事 ， 分 别 从 不 同 的 侧面 探讨 搜索 。 第 
一 个 故事 是 关于 搜索 本 身 ， 第 二 个 与 搜索 结果 列表 有 关 ， 而 第 三 个 则 是 

如 何 精炼 搜索 条 件 以 便 得 到 更 有 效 的 结 


当然 ， 所 有 这 些 故 事 都 是 在 讲述 如 何 创 造 各 种 积极 的 瞬间 。 它 们 会 让 用 
户 留 在 你 这 里 ， 而 不 是 跑 去 其 他 什么 网 站 。 
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2006 ££, DoTheRightThing.com " (缩写 是 DTRT) 网 站 发 布 前 不 久 ， 
DTRT 的 创始 人 Rod Ebrahimi 和 Ryan Mickle 找到 我 ， 想 让 我 为 他 们 的 设 
计 做 一 些 可 用 性 评审 。 而 我 在 那 一 刻 一 定 感觉 自己 非常 高 尚 慷慨 ， 因 为 
一 听 到 他 们 的 主意 ， 我 就 宣布 无 需 他 们 文 付 任何 酬劳 。 简 单 来 说 ， 我 真 
的 很 欣赏 这 个 想法 ， 而 且 我 愿意 为 之 贡献 自己 的 力量 。 


Rod 和 Ryan 试图 要 为 世界 带 来 一 些 改变 。 他 们 建立 了 一 个 主页 ， 里 面 都 
是 由 用 户 自 发 创建 的 内 容 ， 全 都 是 关于 各 种 公司 或 团体 的 行为 及 举措 。 
比如 说 ， 像 Adobe 或 者 Yahoo 这 样 的 公司 如 果 有 了 什么 善举 ， 网 站 的 成 
员 就 会 发 布 文章 介绍 这 种 行为 ， 以 图 引起 公众 注意 并 且 让 其 他 公司 仿效 ， 
去 “做 正确 的 事 ” 同样 地 ， 当 某 些 公司 做 的 事 不 够 体面 ， 这 些 文章 也 能 
发 动 大 众 进行 声讨 。 网 站 成 员 也 能 为 每 一 个 故事 评分 ， 以 此 表现 出 该 事 
件 所 造成 的 社会 影响 力 。 


这 真是 个 高 尚 的 想法 ， 而 且 我 很 骄傲 自己 能 为 DTRT hJ. 


然而 在 他 们 能 够 手动 地 球 之 前 ， 他 们 迫切 地 希望 能 找到 一 个 文 点 ， 即 要 
改变 网 站 中 最 重要 的 一 项 任务 流程 : 怎样 发 表 一 个 新 故事 。 


在 做 评审 的 3 天 时 间 里 ， 我 一 直 在 想 应 该 如 何 发 表 新 故事 ， 但 总 是 得 不 
到 一 个 令 人 满意 的 答案 。 


最 初 的 设计 版 本 是 ， 在 发 表 关 于 某 家 公司 好 的 或 者 坏 的 故事 之 前 ， 你 





















































































































































































































































































































































(D DoTheRightThing.com 这 个 网 站 的 中 文 名 称 可 以 是 “为 所 应 为 ” 或 者 说 “做 正确 的 
事 ” 在 这 里 社会 大 众 可 以 对 一 些 公司 进行 自由 评论 。 人 们 可 以 共享 对 各 公司 的 发 
现 和 认识 ， 直 接 了 解 各 公司 动态 ， 也 能 实时 获取 并 评论 各 公司 在 社会 上 所 展现 出 的 
攻 象 。 网 站 里 也 有 关于 中 国 的 文章 ， 例 如 “星巴克 是 和 否 应 该 搬出 紫禁城 ” 该 网 站 
的 网 址 为 http://www.dotherightthing.com/。 一 一 译 者 注 
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必须 单 击 Companies (公司 ) 标签 ， 然 后 选 





择 这 家 公司 的 名 称 。 














这 个 设计 且 不 说 效率 低下 ， 它 让 人 很 难 弄 明白 到 底 该 怎样 才能 发 表 一 个 
新 故事 。 最 终 ， 你 必须 进入 该 公司 的 详情 页 面 才能 做 这 件 事情 。 而 当 你 
想 要 发 表 茶 个 故事 时 ， 没 有 任何 理由 需要 跑 到 那个 公司 的 网 页 上 去 。 为 
了 让 这 一 过 程 一 目 了 然 ， 需 要 通过 茶 种 方式 让 我 们 在 网 站 的 任何 地 方 都 













































































能 发 表 文章 。 
我 建议 在 网 站 的 每 个 页 面 上 都 提供 Submit 























New Story 〈 提 交 新 故事 ) 按 


钮 。 然 后 在 之 后 的 页 面 中 ， 用 户 可 以 从 列表 中 选择 某 家 公司 ， 也 可 以 自 





行 输入 新 的 公司 名 ， 然 后 直接 发 表 上 自己 的 故 


XE 


Fo 





DTRT 很 喜欢 这 个 主意 。 让 我 感到 特别 高 兴 的 是 ， 两 个 星期 之 后 他 们 给 


我 展示 了 新 的 解决 方案 ， 给 了 我 一 个 大 大 的 惊喜 ， 他 们 的 设计 比 我 预期 





的 要 好 得 多 。 

































































他 们 并 没有 简单 地 往 页 面 上 于 一 个 公司 列表 ， 然 后 让 用 户 去 单 击 选择 ， 
而 是 采用 了 一 种 搜索 功能 。 更 准确 地 说 ， 是 一 种 能 够 “自动 完成 ”的 搜 




















索 功 能 。 














C9.1 运用 Poka-yoke 机 制 ， 使 用 自动 完成 输入 框 


Poka-yoke “是 一 个 日 语词 汇 ， 有 “防止 错误 ”的 意思 。 人 们 通过 这 种 
Poka-yoke 机 制 侦 测 错误 ， 或 者 防止 错误 发 生 。 


而 “自动 完成 ”的 设计 思路 就 是 Poka-yoke 预防 机 制 的 一 个 例子 。 





“自动 完成 ” 指 的 是 某 种 奇特 的 文本 输入 框 。 























它们 能 够 尝试 猜测 用 户 输入 





























的 文字 ， 并 且 动 态 地 搜索 出 适 配 的 结果 ， 然 后 推荐 给 用 户 ， 辅 助 他 们 完 





















































成 输入 。 有 些 输 入 框 会 直接 在 框 内 显示 最 接近 的 那个 词 ， 还 有 些 输入 框 














则 会 显示 一 个 适 配 的 列表 ， 用 户 可 以 在 其 中 选择 。 


























这 两 种 “自动 完成 ”输入 框 都 能 避免 用 户 打 错 字 ， 从 而 确保 他 们 的 搜索 








Q Poka-yoke GR Zi g 70 一 词 最 早出 自 于 日 本 





“错误 ” Yokeru 的 意思 是 “避免 ”。 举 个 Poka- 











EH (Toyota) 公司。Poka 的 意思 是 
yoke 的 实例 ， 如 果 自 动 档 的 汽车 没 











有 挂 到 停车 的 P 档 ， 车 钥匙 就 无 法 拔 出 。 这 样 可 以 防止 司机 在 未 锁 死 车 轮 的 不 安全 






































情况 下 离开 汽车 。 再 比如 3.5 英寸 软盘 的 右上 














多 状 有 些 特别 ， 此 举 可 以 避免 人 们 








以 错误 的 方向 插入 软盘 。 一 一 译 者 注 











更 有 效率 。 
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而 在 DTRT 这 个 案例 中 ， 这 种 输入 框 还 能 在 用 户 发 表 故 事 时 防止 他 们 为 











已 经 存在 于 数 





据 库 中 的 公司 输入 各 种 各 样 的 新 名 字 ， 如 图 9-1 所 示 。 














Step 1: Search for a company to write about: 


H 


vo 





"T Sterling National Bank 
Sterling National Bank 

Sterling National Bank 

ePrep 

Accenture 


Make Money on Google Adsense 


Ad 

Adobe Systems (Macromedia, Photoshop, Flash) d 
Innocent Drinks 

Tesla Motors 





IMRC 








图 9-1 


举 个 例子 ， 如 果 想 写 一 篇 关于 Adobe Systems "的 故事 ， 那 么 用 户 输 入 
Ad 两 个 字母 后 就 会 从 数据 库 中 搜索 并 产生 一 个 列表 ， 都 是 以 这 些 字 母 





Adobe System 





























开头 的 公司 名 。Adobe 磁 巧 是 第 一 个 ， 因 此 用 户 可 以 直接 从 列表 中 选择 





























s 然后 进行 下 一 步 。 如 果 Adobe Systems 没有 出 现 ， 那 么 用 





























户 可 能 会 输入 他 认为 正确 的 任何 一 个 公司 名 称 〈 比 如 Adobe )， 而 结果 就 


会 导致 为 同一 





家 公司 创建 多 条 数据 库 记 录 。 














这 样 一 来 很 可 能 会 出 现 有 好 儿 个 页 面 同时 指向 一 个 公司 ， 其 中 任何 一 个 








“ 目 动 完成 ”输入 框 也 能 预防 在 搜索 中 出 现 一 些 错误 。DTRT 用 户 经 常 在 
输入 儿 个 字母 的 情况 下 就 能 在 推荐 列表 中 发 现 正 确 的 公司 名 称 ， 而 不 




















含 与 该 公司 相关 的 所 有 故事 。 

































































X ptit 











的 文字 增加 


A 
另外 ， 这 种 输入 框 列 出 的 搜索 结果 也 不 会 分 页 。 因 为 搜索 结果 是 随 着 输 
入 





误 而 找 不 到 适 配 搜索 结果 。 






































而 变化 的 一 一 就 在 当前 页 面 中 。 因 此 完全 没有 必要 点 开 “ 下 


























一 页 ” 然后 是 


了 等待 其 余 的 搜索 结果 。 





























但 最 重要 的 是 大 部 分 用 户 很 欣赏 这 种 “自动 完成 ”输入 框 。 他 们 说 “ 它 





CD Adobe Sy 


rated". 

















stems 即 我 们 常 说 的 Adobe 公司 ， 其 英文 全 称 为 “Adobe Systems Incorpo- 
译 者 注 
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蛮 灵 的 ”而 且说 这 个 功能 让 他 们 更 加 信任 这 个 网 站 ， 因 为 开发 者 做 出 了 
相当 的 努力 让 事情 变 得 确实 简单 了 。 


“自动 完成 ”这 种 设计 方案 能 带 来 很 多 非凡 的 好 处 ， 但 它 也 同样 也 有 一 些 
局 限 性 。 


9.1.1 局 限 性 


在 Designing the Obvious 一 书 中 ， 我 曾 指出 Google Suggest" 提 供 了 一 种 
解决 方案 ， 它 模糊 了 侦 测 错误 和 防止 错误 之 间 的 界限 。 


我 们 发 现 “ 自 动 完成 ”这 一 功能 其 实 并 不 是 在 任何 情况 下 都 能 提供 帮助 。 
当 用 户 搜索 一 些小 范围 的 数据 时 ， 例 如 某 个 自行 车 零 部 件 的 目录 ， 它 会 
很 有 用 ， 但 是 对 于 在 诸如 Google Suggest 和 Yahoo Instant Search 2 这 样 的 
网 站 中 进行 广 域 搜索 的 用 户 来 说 ， 并 不 一 定 如 此 。 


换言之 ， 与 其 说 Google Suggest 教 给 了 我 们 如 何 防止 错误 ， 倒 不 如 说 它 
在 暴露 “自动 完成 ”的 局 限 性 方面 做 得 更 好 。 


首先 ， 那 些 果 着 键盘 输入 文字 的 用 户 通 常 根本 就 不 会 注意 到 推荐 列表 。 
虽然 已 经 把 一 切 都 送 到 眼前 了 ， 他 们 却 还 看 不 到 。 有 些 人 偶尔 会 在 打 完 
字 后 抬 起 头 才 发 现 推荐 列表 ， 但 是 他 们 往往 都 是 敲 了 回 车 键 后 才 抬头 ， 
所 以 根本 就 没 看 清楚 列表 里 面 是 些 什么 。 


其 次 ， 用 户 往 往 会 因为 推荐 而 放弃 自己 先前 的 主张 ， 但 其 实 他 们 自己 想 
输入 的 文字 很 可 能 比 推荐 的 词汇 更 加 有 效 。 
比如 说 ， 某 个 希望 搜索 有 关 企 业内 网 平台 入 口 的 用 户 可 能 会 希望 输入 
designing intranet portals 这 样 的 搜索 词汇 。 但 是 如 果 在 开始 输入 时 他 注 



























































































































































































































































































































































































































































(D Google Suggest 是 Google 搜索 引擎 最 重要 的 人 性 化 服务 之 一 ， 即 在 搜索 栏 输入 框 内 
使 用 了 前 文 提 到 的 “自我 完成 ”功能 ， 使 用 户 在 输入 搜索 关键 词 时 能 及 时 调整 关键 
词 推荐 列表 ， 以 获得 最 需要 的 搜索 结果 。Goosgle 称 其 使 用 了 一 系列 广泛 的 信息 来 预 
测 用 户 的 输入 内 容 ， 例 如 通过 各 种 搜索 请 求 的 流行 度 来 确定 这 些 预 测 推荐 请 求 的 排 
列 顺序 等 。 该 功能 曾 被 国外 用 户 评 为 2006 年 Google 最 出 色 的 新 特性 之 一 。 网 址 为 
http://www.google.com/webhp?complete-1&hl-en. 译 者 注 

(2) Yahoo Instant Search 和 Google Suggest 非常 类 似 ， 在 用 户 开 始 输入 关键 词 的 同时 开 

台 搜索 相 适 配 的 信息 。 不 过 它 显 示 的 并 不 是 关键 词 推荐 列表 ， 而 是 在 辨识 出 用 户 输 

入 的 关键 词 用 意 后 出 现 一 个 悬浮 窗口 ， 显 示 相 关 问 题 的 答案 。 网 址 为 http://search. 

yahoo.com/instant。 一 一 译 者 注 
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意 到 了 那些 推荐 的 搜索 词汇 ， 于 是 就 可 能 会 转 而 选择 其 中 的 designing 
intranets， 如 图 9-2 所 示 。 











rr Advanced Search 
designing intra Preferences 


designing intranet 1,800,000 results| Language Tools 
designing intranets 40,000,000 results 
close 











图 9-2 


之 所 以 会 出 现 这 种 情况 ， 可 能 是 由 于 用 户 认为 系统 推荐 的 词汇 将 会 产生 更 
有 效 的 结果 ， 也 有 可 能 他 们 认为 这 些 搜索 词汇 是 搜索 引擎 开发 者 希望 他 们 
使 用 的 词汇 。 


第 二 个 理由 其 实 毫 无 道理 。 可 能 你 我 都 知道 ， 但 还 是 有 很 多 人 一 直 都 是 
这 样 思考 的 。 他 们 认为 当 自 己 被 要 求 或 者 至 少 是 被 引导 去 做 什么 的 时 
候 ， 提 出 该 要 求 的 网 站 肯定 比 他 们 自己 聪明 ， 因 此 他 们 就 应 该 服从 。 


无 论 如 何 ， 在 进行 没有 固定 范围 的 广 域 搜索 时 ,“ 上 自动 完成 ”功能 可 能 会 
诱导 用 户 放弃 自己 本 来 正确 的 想法 ， 而 去 选用 网 站 推荐 的 ， 但 其 实效 率 
较 低 的 搜索 词汇 。 


第 三 ， 你 必须 时 刻 注意 不 要 让 推荐 “ 抢 跑 ”得 太 快 。 


在 Yahoo Instant Search 中 输入 des 会 出 现 Wisdom Tree ?当前 财务 数据 。 
而 在 Google Suggest 里 面 做 同样 的 事情 ， 最 优先 的 选项 则 是 Desperate 
Housewives2。 但 很 可 能 我 们 想 输入 的 单词 其 实 是 Design。 很 明显 ， 仅 仅 
只 有 单词 的 头 3 个 字母 ， 不 管 是 Yahoo 还 是 Google 都 不 足以 马上 确定 用 
户 所 寻找 的 信息 到 底 是 什么 。 见 图 9-3。 























































































































(D Wisdom Tree (DES) 是 一 家 投资 顾问 公司 ， 它 主持 开办 了 一 个 以 货币 兑换 交易 为 
基础 的 小 型 红利 基金 。 与 上 文 有 联系 的 具体 网 址 为 http://www.wisdomtree.com/etfs/ 

fund-details.asp?etfid=15。 译 者 注 
(2) Desperate Housewives 是 指 美剧 “绝望 主妇 ”。 一 一 译 者 注 

















72 第 9 章 提出 搜索 词 建议 


YAHOO! SEARCH 


Instant Search ^^'^ 


es| 


Financial Information for WISDOMTREE SC 


DIV (DES) 





Last: 53.35 change: -0.3 (-0.56%) at 12:59 








PDT Oct 30 
Quotes - Charts - Profile - Message Boards — 55 5 
à . BÀ) 
53.6 
Other 53.5 
More headlines for DES... 53.4 


Quote delay: 15 min - Nasdaq, 20 min- 33-3 Tos 
NYSE and Amex 
Yahoo! Shortcut - About 


DES 30-üct 3:59pm (C)Yahoo! 





1 
12pm 2pm 4pm 











图 9-3 

















在 输入 的 字符 数 足 以 让 推荐 词 有 意义 之 前 ， 请 不 要 显示 推荐 词 。 当 然 从 








另 一 方面 来 说 ， 目 前 也 没有 一 个 魔法 数字 能 











确切 地 规定 到 底 应 该 


时 候 显示 推荐 词 。 因 此 我 们 和 暂且 把 这 个 界限 定 为 3 一 4 个 字符 。 





最 后 ， 同 Ajax 4l DHTML 开发 的 任何 东西 一 样 ,“ 自 动 完成 ”在 易 用 性 





方面 也 存在 问题 。 

















在 什么 





























众所周知 ， 屏 幕 阅 读 器 是 按照 从 上 到 下 的 顺序 读 取 已 载 入 页 面 的 。 











在 页 面 载 入 完毕 之 后 “ 变 ” 出 来 的 任何 东西 














因此 ， 








， 都 需要 通知 屏幕 阅 











用 发 生 了 什么 改变 ， 并 且 在 页 面 的 这 一 部 分 
些 部 分 将 无 法 被 视力 有 障碍 的 用 户 “ 阅 读 ”。 


9.1.2. ”好 雨 知 时 节 
































给 它 一 个 快速 入 口 ， 





读 器 页 
否则 这 





抛 开 这 些 局 限 性 ， 我 们 能 通过 “自动 完成 ”来 帮助 大 部 分 用 户 更 加 快速 








地 获得 信息 ， 避 免 他 们 在 搜索 过 程 中 出 现 失 








误 ， 防 止 为 同一 个 数 

















据 创 建 


多 个 数据 库 条 目 。 同 时 它 还 能 让 你 在 用 户 搜寻 出 信息 的 瞬间 得 到 他 们 的 








赞赏 和 感激 。 








对 于 DoTheRightThing 网 站 来 说 ,“ 自动 完成 ”是 一 个 完美 的 解决 方案 。 


它 改 变 了 之 前 麻烦 笨拙 的 故事 发 表 步 又 ， 加 
有 效 。 从 这 一 点 上 来 说 ， 他 们 的 确 是 在 “做 














快 了 该 流程 的 速度 并 
FE 确 的 事 ”。 











且 更 为 
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在 因特网 上 使 用 搜索 引擎 时 ， 只 需要 输入 关键 词 ， 单 击 Search GUK) 
按钮 之 后 ， 我 们 通常 得 在 海量 的 搜索 结果 中 努力 找寻 我 们 需要 的 信息 。 
这 个 行为 已 经 变 得 很 常见 ， 尤 其 是 如 今 人 们 每 天 绝 大 部 分 的 网 络 体验 都 
是 从 Google.com 开始 的 。 


我 们 去 Google 搜索 并 找到 某 个 相关 链接 ， 然 后 单 击 它 。 
时 ， 我 们 再 回 到 Google。 


这 样 一 来 ，Google 几乎 变 成 了 很 多 人 一 种 根深 蒂 固 的 习惯 ， 哪 怕 是 互联 
网 新 手 也 是 如 此 。 他 们 极其 虔诚 把 自己 的 浏览 器 主页 设置 为 那个 传奇 
最 精简 的 网 页 ， 并 将 其 作为 万 事 的 开始 。 他 们 从 那里 出 发 去 学 习 新 事物 、 
购物 ， 甚 至 是 前 往 某 个 熟知 的 域名 网 站 《是 的 ， 很 多 人 甚至 可 能 包括 你 
都 是 先 在 Google 搜索 栏 内 输入 某 个 域名 的 URL， 然 后 再 单 击 第 一 个 搜索 
结果 进入 那个 网 站 )。 
上 述 的 事实 有 次 给 我 带 来 了 一 些 肪 烦 ， 当 时 我 正在 协助 某 个 论坛 开发 。 
意识 到 如 果 设 计 得 很 差劲 ， 哪 怕 是 简单 如 一 个 搜索 结果 的 分 页 系统 ， 
也 会 让 用 户 痛 至 不 已 。 在 为 该 论坛 协作 开发 几 周 后 ， 我 拿 到 了 搜索 结果 
页 的 设计 稿 。 


而 这 个 分 页 系统 的 界面 ， 唔 ， 不 是 很 好 ， 如 图 10-1 所 示 。 









































M 


需要 其 他 信息 
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图 10-1 
首先 ， 当 前 页 面 Page 1 的 链接 是 可 以 点 击 的 ， 但 它 没 必要 如 此 。 毕 况 用 
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户 已 经 在 这 个 页 面 上 了 ， 对 吧 ? 











其 次 ， 在 这 个 设计 中 没有 指示 能 表明 用 户 当 前 在 哪个 页 面 。 没 有 让 当前 页 
面 的 数字 凸显 出 来 ， 事 实 上 它 看 上 去 和 所 有 其 他 的 页 面 链接 都 是 一 样 的 。 


与 此 同时 ，Pagel 中 的 左 箭头 也 无 意义 ， 因 为 在 搜索 结果 的 第 一 页 我 












































们 无 法 回 退 到 任何 地 方 。 现 在 的 情况 是 存在 两 个 箭头 : 向 右 的 可 以 点 击 ， 








向 左 的 却 不 可 以 。 
































该 部 分 的 标签 Page 也 很 没 必 要 。 它 放 在 那里 虽然 3 











得 有 点 轧 盔 ， 因 为 它 并 没有 显示 当前 页 数 。 




































































那些 数学 的 链接 太 小 了 。 它 们 显示 的 是 正文 字体 大 小 ， 但 由 于 每 个 链接 
只 包含 一 个 字符 ， 因 此 用 户 很 难 把 鼠标 准确 地 移动 到 上 面 并 单 击 。 


最 后 ， 这 个 分 页 系统 放 在 了 搜索 结果 列表 的 右上 角 。 这 一 点 打破 了 包括 





没什么 坏处 ， 但 却 显 


























Google. MSN. Yahoo 等 几乎 所 有 的 主流 搜索 站 点 设 定 的 惯例 。 























我 现在 常常 鼓励 人 们 挑战 标准 ， 然 而 至 关 重 要 的 一 点 是 ， 在 准备 挑战 标准 
时 请 确保 你 的 目标 是 为 了 改进 它们 。 如 果 你 的 新 设计 并 没有 做 到 改进 ， 那 









































么 你 的 用 户 将 不 仅 得 不 到 任何 好 处 ， 反 而 有 可 能 失去 更 多 。 因 为 他 们 无 法 


























利用 在 其 他 网 站 获得 的 经 验 ， 所 以 不 能 很 快 地 理解 如 何 使 用 你 的 网 站 。 


C 10.1 信赖 那些 行 之 有 效 的 标准 


很 多 时 候 ， 有 些 事 物 优秀 到 足以 被 普遍 接受 ， 好 像 它 本 身 就 是 某 种 标准 。 


























于 这 类 情况 。 见 图 10-2。 


只 要 背离 了 它 ， 那 就 一 定 是 不 好 的 。 也 许 该 感谢 Google， 分 页 系统 也 属 
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图 10-2 








Google 的 分 页 系统 非常 容易 辨识 ， 不 仅仅 是 因为 它 被 Google 使 用 ， 还 因 














为 它 被 无 数 其 他 网 站 所 借鉴 ， 其 中 包括 各 种 主流 搜索 站 点 。 











不 管 是 在 哪个 网 站 ， 分 页 系统 彼此 都 很 相似 。 每 个 分 页 系统 都 有 一 个 
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Previous (上 一 页 ) 链接 、 一 个 Next( 下 一 页 ) 链接 ， 两 者 当中 还 有 一 系 
列 数字 。 而 且 绝 大 多 数 分 页 系统 都 会 通过 某 种 方式 让 当前 页 码 的 数字 有 
别 于 其 他 链接 。 


抱 着 这 种 想法 ， 我 开始 尝试 为 这 个 论坛 的 分 页 系统 做 一 些 改 变 。 


首先 ， 我 去 掉 了 Page 标签 ， 把 左 箭头 设置 为 不 可 用 状态 ， 然 后 把 两 个 箭 
关 分 曾 放 在 那 串 外 码 链接 的 两 端 。 这 样 做 是 为 了 让 界面 在 一 开始 就 给 人 
选择 : 只 要 愿意 ， 他 们 可 以 很 快 地 回 退 到 之 前 的 页 面 。 同 时 为 了 一 致 性 ， 
我 也 修改 了 箭头 的 颜色 ， 使 之 和 链接 的 颜色 相配 套 。 见 图 10-3. 


12345.. | 


图 10-3 


然后 ， 我 将 文字 的 字体 加 大 了 一 点 点 ， 并 且 改 变 了 当前 页 码 的 文字 样式 ， 
使 它 从 其 他 数字 链接 中 凸显 b a. 把 它 的 
颜色 改 为 红色 ， 并 且 加 大 了 字号 。 同 时 也 增 大 了 箭头 的 大 小 ， 让 界面 中 
每 一 个 元 素 都 能 更 容易 被 点 击 。 见 图 10-4. 
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图 10-4 


最 后 ， 我 添加 了 Previous 和 Next 的 文字 链接 ， 把 它们 放 在 相对 应 的 箭头 
旁边 。 单 纯 从 技术 上 来 说 ， 在 大 部 分 情况 下 这 些 文字 链接 都 是 不 必要 的 ， 
因为 箭头 足以 完成 任务 。 但 是 ， 文 字 链 接 增 大 了 这 两 个 最 为 常用 的 链接 
的 响应 区 域 ， 使 得 点 击 更 为 容易 。 记 住 ， 界 面 越 简 单 ， 交 互 的 瞬间 就 越 
美好 。 见 图 10-5. 
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噢 ， 当 然 我 还 把 整个 分 页 系统 从 结果 列表 页 的 右上 角 移 到 了 下 方正 中 。 


这 样 它 就 更 容易 满足 用 户 的 预期 ， 也 更 容易 让 用 户 找到 。 
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在 这 个 案例 中 ， 我 遵循 了 标准 。 设 计 或 者 说 寻找 合适 的 分 页 系统 变 得 不 
再 那么 困难 。 诸 如 Google 等 已 经 为 分 页 制定 了 一 个 非常 流行 的 设计 方 
而 且 也 都 以 非常 近似 的 手段 应 用 这 些 分 页 系统 。 与 此 同时 ， 这 个 标 


式 ， 
准 化 的 解决 方案 对 


战 标准 、 冒 险 人 破坏 用 户 期 望 ， 倒 不 如 遵循 它们 ， 效 果 反 而 会 更 好 。 















































哪怕 是 新 手 来 说 也 相当 好 用 。 很 多 情况 下 ， 与 其 挑 











提供 回 到 搜索 结果 列表 的 出 口 
在 我 们 继续 之 前 ， 关 于 搜索 结果 页 面 还 有 一 件 事情 需要 讨论 一 下 。 
有 了 时候， 我 从 一 些 网 站 的 搜索 结果 列表 单 击 进入 某 个 页 面 ， 然 后 在 希望 


回 退 到 之 前 的 结果 列表 时 ， 却 发 现 该 页 面 中 没有 这 个 入 口 。 



























































当 这 种 情况 发 生 时 ， 用 户 要 么 依靠 万 能 的 浏览 器 Back (后退 〉 按钮 ， 要 
么 直接 从 这 个 结果 页 开始 新 一 轮 的 搜索 。 但 碰巧 我 属于 坚信 用 户 不 应 该 
依赖 Back 按钮 的 那 一 类 人 。 网 站 自身 应 当 始终 为 用 户 提供 导向 ， 方 便 他 
们 在 站 点 中 来 入 自如， 而 不 是 依靠 浏览 器 工具 。 


因此 ， 我 经 常 在 自己 的 设计 中 加 入 一 些 东西 ， 从 而 能 够 明确 地 达到 这 一 
目的 。 它 们 看 上 去 很 像 Gmail "里 面 所 提供 的 那样 ， 例 如 图 10-6. 


当 Gmail 的 用 户 为 
都 指派 一 个 标签 ， 
导航 的 工具 条 中 )， 
Gmail 为 他 们 


M. 
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TR s 1 


















































Remove label "Newsletters" ) ( Report Spam ) ( Delete ) 


图 10-6 


























邮件 设置 了 某 个 标签 (你 能 为 Gmail 中 的 每 一 封 邮件 
类 似 文件 夹 那 样 便于 归档 整理 。 这 些 标签 被 列 在 边 


















































六 








昌 单 击 进 入 该 标签 下 的 某 封 邮件 进行 阅读 时 ， 











提供 了 一 个 Back to( 回 到 ) 的 链接 。 


图 10-6 中 ， 这 个 链接 让 我 能 Back to“Newsletters”( 回 到 “时 事 通 
E 如 你 所 猿 到 的 ，Newsletters (时 事 通 讯 ) 是 我 创建 的 一 个 标 








O RAJA, Gmail 是 Google 提供 的 免费 电子 邮箱 ， 网 址 为 http://www.gmail.com。 
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签 ， 里 面 放 的 全 都 是 我 订阅 的 该 类 邮件 。 如 果 没 有 Back to 链接 ， 我 想 
回 到 Newsletters 标签 内 容 列 表 的 唯一 方法 只 能 是 先 在 左 侧 工具 栏 中 找到 
Newsletters 一 词 ， 然 后 单 击 它 。 


最 好 的 情况 下 ， 这 让 人 感觉 效率 低下 。 而 最 坏 的 情况 ， 很 可 能 我 没有 想 
到 这 个 办 法 ， 而 是 人 碰巧 单 击 了 另外 什么 东西 ， 最 后 完全 迷失 了 方 问 。 


设计 搜索 结果 页 面 时 ， 请 考虑 在 其 中 加 上 类 似 上 文 所 提 到 的 东西 。 例 如 ， 
Home (首页 ) —> Search results〈 搜 索 结果 列表 ) — Product page《〈 产 品 
页 面 )。 


我 的 设计 ( 线 框图 形态 ) 看 上 去 如 图 10-7 所 示 。 
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Book title 
Book subtitle Add to Cart 
Read it now | l—— t 
— Publisher: Publisher Name Seeallinthiscategory | 
"m Released: October, 2005 X —————— 


Author: Joe Smith 
Contributors: Anderson, David F. 





Pages: 267 





图 10-7 























这 个 背景 颜色 突出 的 简单 Back to Search Results 〈 回 到 搜索 结果 列表 ) 链 
接 ， A 个 出 口 。 用 户 有 了 可 依靠 的 支撑 点 ， 从 而 不 需要 求 
助 浏览 器 工具 。 


好 的 网 站 设计 应 该 能 够 通过 我 说 的 “无 浏览 器 自 测 试 ” 的 检验 。 这 种 测 
试 抛 开 浏览 器 以 及 站 点 导航 提供 的 工具 栏 、 收 藏 夹 等 一 切 功能 ， 据 弃 任 
可 援助 ， 而 只 依靠 网 站 本 身 来 引导 用 户 。 如 果 你 的 站 点 通过 了 这 一 测试 ， 
那么 今天 可 以 告 一 段落 了 ， 去 吃 个 三 明治 吧 ! 


Back to 链接 和 分 页 系统 是 非常 基础 的 设计 ， 但 如 果 做 得 不 好 ， 它 们 就 会 
成 为 适 成 用 户 挫折 感 的 关键 因素 。 当 人 磁 到 类 似 这 样 应 用 极为 广泛 的 设计 
时 ， 最 好 遵循 普 吉 的 标准 ， 帮 助 用 户 达 到 他 们 的 目的 ， 而 不 要 迫使 他 们 
学 习 任何 新 的 东西 
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在 各 个 网 站 上 ， 绝 大 多 数 人 只 是 依靠 那个 后 面 带 有 “搜索 ”按钮 的 输入 
框 来 进行 搜索 。 因 为 这 种 途径 最 为 简单 ， 也 最 好 辨认 。 而 当 需 要 对 他 
们 的 搜索 加 以 更 多 控制 的 时 候 ， 那 些 网 站 通常 也 会 提供 一 个 Advanced 
Search 〈 高 级 搜索 ) 的 选项 以 便 满 足 需求 。 


然而 ， 到 底 需 要 有 多 Advanced (AR) W? 或 者 更 准确 地 说 ， 那 些 高 级 
的 选项 应 该 复杂 到 什么 程度 ， 才 能 让 用 户 找到 自己 所 需要 的 东西 ? 


很 多 时 候 ，Advanced Search 就 是 能 塞 满 整个 屏幕 的 一 推选 项 ， 很 快 就 让 
你 难以 忍受 。 比 如 ， 图 11-1 中 Google 的 Advanced Search HHI”. 
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( OK gl ^ Advanced Search Advanced Search Tips | About Google 
f ac 
Find resuit with all of the words loresuls $ | ( Google Search ) 
with the exact phrase 


with at least one of the words 











without the words 
Language Return pages written in (any language 
File Format [Only +) retum results of the file format [any format — — EH 
Date Return web pages first seen in the. (anytime - B 
Numeric Range ^ Retum web pages containing numbers between and 
Occurrences Return results where my terms occur [anywhere in the page $] 
Domain (Only $) retum results from the site or domain 
一 一 e.g. google.com, .org More info 
I fi 
Usage Rights Return results that are „not ——— 
SafeSearch © No filtering O Filter using SafeSearch 
Page-Specific Search 
一 "( ) 
Similar Find pages similar to the page Bener 
vww.google.com/help.html 
Links Find pages that link to the page Search ) 


图 11-1 


























CD Google 的 Advanced Search 页 面 现在 已 经 不 是 作者 截屏 的 那个 界面 了 ， 已 经 进 和 
大 幅度 的 简化 。 网 址 为 http:/www.google.com/advanced_search?hl=en。 一 一 译 者 注 
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然而 ， 在 大 多 数 情 况 下 ， 这 利 
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高 密度 的 选项 其 实 并 没 必要 。 尽 管 那些 更 











有 经 验 的 用 户 ， 或 者 有 着 非常 精确 需求 的 用 户 可 能 偶尔 会 冒险 使 用 这 些 











"aur 


高 级 选项 ， 但 它们 通常 





ufu) 
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下 面 是 我 近期 做 的 一 个 项 目 ， 当 时 正在 为 某 个 数字 下 载 公 司 的 产品 目录 
做 再 设计 。 网 站 的 快捷 搜索 ， 就 像 其 名 称 那 样 ， 确 实 足够 简单 ， 只 是 一 
个 输入 框 和 一 个 Search 搜索) 按钮， 但 是 他 们 的 高 级 搜索 就 完全 变 成 


男 一 种 形态 了 。 








上 看 到 的 就 是 如 图 11-2 所 示 的 这 个 界面 。 





























Search content 
Search in: Text 
and in: Subject 
and in: Publication years 
and in: License type 
and in: Document type 

















不 论 何 时 ， 当 用 户 单 击 Advanced Search 链接 后 ， 在 屏幕 









































"interface design" [x] 
"web design" [xj 
From: [2008 | To: [2008 | [x] 
All license types [X] 
All document types [x] 
"interface" [x] 














图 11-2 

















这 个 Advanced Search 页 面 并 不 像 Google 的 那样 复杂 ， 但 是 仍然 有 一 些 
地 方 可 以 充分 地 改进 。 


该 版 本 的 设计 者 可 能 认为 ， 如 果 把 所 有 的 选项 立刻 展现 H 














统 观 全 局 ， 并 





























会 在 用 户头 上 形成 那 种 讨厌 的 卡通 思维 泡 泡 : 






































上 1 来， 用 户 就 能 





且 只 编辑 自己 需要 的 那儿 个 选项 即 可 。 但 是 这 种 方法 通常 


“我 需要 填 完 所 有 这 些 玩意 吗 ? 如 果 我 只 填写 了 一 部 分 ， 会 发 生 什 么 ?” 














随 着 更 为 仔细 

















的 检查 ， 








mx 图 标 。 | 














当然 ， 还 有 : 








昌 户 可 能 会 注意 到 那些 用 来 类 


























j 这 些 又 会 触发 另 
“这 些 图 标 是 说 我 必须 从 表单 
移 除 的 太 多 了 怎么 办 ? 还 有 ， 如 果 我 改变 主意 了 ， 示 
做 ? 我 是 否 必须 单 击 Start Over (重新 用 


作 泡 泡 : 



































移 除 不 需要 的 选项 才能 正常 工作 吗 ? 那 我 
上 回来 ， 该 怎样 
F 始 )， 然 后 ， 再 全 部 从 头 再 来 ? ” 
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E BET 


P 茶 行 选项 
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“如 果 我 的 这 次 搜索 是 这 样 设置 的 ， 那 以 后 怎样 才能 够 再 次 使 用 同样 的 设 
置 ? » 


要 想 清除 所 有 这 些 问 题 泡 泡 ， 只 需要 把 这 个 表单 整理 一 下 即 可 。 
Xx 
A 
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首先 ， 我 决定 保留 默认 的 Quick Search. 〈 人 快捷 搜索 ) 选项 ， 因 为 它 放 在 那 
里 非常 合适 ， 非 常 有 用 ， 也 非常 便于 使 用 。 大 多 数 用 户 想 要 开始 搜索 时 
都 会 从 这 里 开始 。 而 且 它 表现 的 方式 非常 标准 ， 因 此 我 找 不 到 什么 理由 
来 改变 它 。 见 图 11-3。 











人 ^ Advanced 
[mam | se) ases 








图 11-3 

为 了 在 新 的 设计 方案 中 稍微 提 点 速 ， 同 时 让 表单 更 有 效 、 更 容易 理解 ， 
我 希望 能 避免 像 现在 这 样 把 用 户 送 到 一 个 新 页 面 下 ， 然 后 让 他 们 填写 一 
个 复杂 的 表单 。 

我 在 这 里 使 用 了 “行内 扩展 ”的 方式 。 新 的 元 素 将 会 任 空 “ 掉 落 ”到 网 
页 中 ， 然 后 把 其 他 的 内 容 往 页 面 下 方 推 开 。 推 开 后 ， 就 如 图 11-4 所 示 。 
















































































































































































Er |]Eee 让 is 

Search content 
Searchin: [Text for: [interface design" —- E [Ix] 
and in: Subject for: "web design" 四 
and in: Publication years H for: — From:|2006 | To:|2008 [x] 
andin: [cense type for: [Al icense types [x] 
and in: Document type for: All document types * xi 
for — interface" | Bg 


























图 11-4 
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通过 这 种 方式 ， 用 户 单 击 Advanced 链接 后 新 的 表单 将 会 如 戏法 般 地 出 现 
在 当前 页 面 ， 而 不 需要 等 待 载 入 新 的 网 页 。 

足够 简单 。 但 真正 的 问题 并 不 是 页 面 载 入 的 时 间 ， 而 是 那个 丑陋 的 表单 。 
11.1.1 递 进 显示 

绝 大 多 数 人 都 不 愿 费 事 去 逐 行 逐 项 地 编辑 这 个 表单 。 而 在 可 能 会 填写 这 
个 表单 的 少数 人 当中 ， 也 只 有 更 少 的 人 会 每 次 都 这 么 和 干 。 通 常 来 说 ， 那 
些 确实 需要 高 级 搜索 选项 的 人 其 实 只 需要 很 少 的 选项 。 

换 句 话说 ， 人 类 的 行为 模式 告诉 我 们 ， 没 有 必要 一 次 就 把 所 有 的 选项 都 
摆 出 来 。 我 们 真正 需要 的 是 一 个 简单 而 又 能 够 广泛 应 用 的 解决 办 法 ， 最 
好 能 只 在 必要 时 才 增 加 选项 。 

这 种 时 候 Progressive disclosure CHIER) 就 是 我 们 要 找 的 完美 解决 
方案 。 

简单 来 说 ， 所 谓 的 “ 递 进 显示 ” “就 是 一 种 设计 方法 ， 它 能 根据 实际 需要 
〈 即 依靠 用 户 的 输入 ) 而 逐步 显示 控件 ， 而 不 是 默认 把 它们 一 股 脑 全 堆 在 
眼前 。 

对 话 框 通常 能 体现 出 递 进 显示 的 概念 。 比 如 说 ， 单 击 Advanced Options 
(高 级 选项 ) 链接 可 能 会 弹出 对 话 框 ， 里 面 能 够 展示 更 多 的 选项 。 这 些 选 
项 在 默认 情况 下 是 隐藏 的 ， 而 上 只 有 当 用 户 确 实 单 击 了 某 个 链接 让 它们 出 
现时 ， 它 们 才 会 出 现 。 

为 了 让 这 个 想法 应 用 到 Advanced Search 表单 中 ， 我 用 1 行 单独 的 控件 
替换 了 原 有 的 6 行 控 件 ， 并 且 在 后 面 加 上 了 一 个 增加 控件 的 按钮 ， 如 图 
11-5 Brzs o 

通过 这 种 方式 ， 用 户 能 够 在 需要 的 时 候 ， 只 需 一 次 增加 一 行 。 他 们 绝 不 
会 因为 突然 出 现 一 大 推选 项 而 难以 忍受 。 
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Q 本 书 作者 有 一 篇 专门 讨论 “ 递 进 显 示 ” 方 法 的 文章 ，2007 年 9 月 发 表 于 Vitamin 网 
站 ， 题 目 是 “Read more*…… 关于 北 进 显示 方法 ”网 址 为 http:Wwww.thinkvitamin. 
译 者 注 















































com/ features/design/read-more-about-progressive-disclosure o 
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- (C ^ Advanced 
[wan — À[.—  — — Jum) frspecs 


Search in | Text | a | for | aviation E ) 














o Search ) Runs a new search using these advanced options. 








图 11-5 


同时 我 也 去 掉 了 Start Over 按钮 。 为 什么 ? 想 一 想 ， 你 最 后 一 次 目睹 有 人 
点 击 这 种 选项 是 在 什么 时 候 ? 绝 大 部 分 时 候 用 户 不 想 全 部 从 头 来 过 。 他 
们 只 希望 修改 部 分 内 容 ， 这 样 就 行 了 。 所 以 ， 送 它 上 路 吧 。 

(顺便 说 一 句 ， 对 于 其 他 类 型 的 网 页 表单 来 说 ， 这 种 做 法 也 是 正确 的 。 我 
们 常常 看 到 的 Clear Form (HE) 选项 其 实 一 点 用 都 没有 。) 

11.1.2 引人入胜 的 交互 

我 留 下 的 1 行 是 用 户 已 经 在 Quick Search 中 输入 过 的 内 容 。 在 图 11-6 
中 ， 选 项 表示 搜索 所 有 文本 中 带 有 aviation (航空 学 ) 关键 词 的 内 容 。 但 
很 明显 ， 单 击 了 Advanced Search 的 用 户 希 望 在 他 已 经 做 完 的 基础 上 进 一 


步 地 精炼 搜索 。 为 了 改进 这 一 点 ， 我 在 它 下 方 又 加 上 了 一 行 有 待 输入 的 
选项 。 


= a ^ Advanced 
[mam | em) Mr, 


„aran [Sii Je oo 






















































































( Search ) Auns a new search using these advanced options. 








图 11-6 
这 种 方式 告诉 了 用 户 如 何 为 搜索 增加 条 件 。 而 且 在 理论 上 ， 它 有 可 能 会 
诱 使 他 们 自己 去 增加 选项 。 


唯一 的 问题 是 那个 Quick Search 仍然 是 激活 的 ， 而 同时 存在 两 个 外 观 彼 
此 不 同 的 Search 按钮 可 能 会 混淆 视听 。 
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最 简单 的 解决 办 法 就 是 让 Quick Search 失效 (图 11-7 顶部 的 Search 按 
钮 )。 


Hide advanced options 














iati 3 
— All subjects 
„andin | Subject $|for um 














€ Search 9 Runs a new search using these advanced options. 








图 11-7 


而 同时 我 把 之 前 的 Advanced 链接 改 成 了 Hide advanced options (Kajikia 
级 选项 )。 这 样 用 户 就 能 知道 如 何 取消 交互 ， 然 后 回 到 Quick Search 中 
去 。 

“ 递 进 显示 ”是 一 个 简单 的 概念 ， 而 且 它 能 以 各 种 方式 适用 于 绝 大 部 分 的 
Web 应 用 。 在 这 里 我 们 用 它 来 简化 高 级 搜索 表单 ， 但 在 其 他 地 方 它 还 能 
用 来 隐藏 各 种 高 级 功能 ， 甚 至 还 能 为 那些 少见 的 配置 选项 提供 一 个 容易 
辨识 的 入 口 。 
此 外 ， 如 果 你 的 老板 有 一 大 扒 差 劲 的 主意 ， 而 又 要 求 你 必须 实现 出 来 ， 
那么 你 也 可 以 运用 “ 递 进 显示 ”的 方法 来 隐藏 其 中 的 内 容 。 


只 要 别 告诉 他 是 我 说 的 就 行 。 
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假设 我 们 的 网 站 已 经 为 用 户 提供 了 充分 的 导向 ， 那 么 现在 是 帮助 他 们 座 
人 去 学 习 更 多 东西 的 时 候 了 。 比 如 注册 账号 ， 以 及 开始 真正 的 应 用 。 


每 一 处 交互 其 实 都 是 一 个 为 用 户 创 造 流畅 、 愉 悦 瞬 间 的 机 会 。 


我 们 可 以 提供 Screencast 或 者 其 他 界面 友好 的 演示 视频 来 帮助 用 户 更 容易 
地 了 解 某 项 服务 或 菜 个 应 用 程序 (正如 第 8 章 所 描述 的 那样 )。 我 们 也 同 
样 需 要 把 这 种 交互 行为 本 身 设计 得 让 用 户 再 一 次 地 感到 自己 有 成 效 、 聪 
蔗 而 且 备 受 苯 重 。 然 而 ， 互 联网 上 关于 视频 方面 却 又 没有 一 个 能 让 人 依 
葫芦 画 标 的 公认 标准 。 考 虑 到 这 些 ， 本 部 分 第 一 个 故事 讲述 了 如 何 设计 
一 个 能 在 各 种 情况 下 都 通用 的 视频 播放 占 。 


一 旦 我 们 说 服 某 位 用 户 注册 之 后 ， 他 就 会 发 现 自己 面 对 着 一 个 填写 资料 
的 过 程 。 而 网 站 的 表单 又 总 是 充满 着 各 种 潜藏 的 错误 ， 哪 怕 连 最 简单 的 
表单 也 可 能 会 导致 混淆 。 绝 大 多 数 表 单 都 只 是 使 用 默认 的 HTML 控件 ， 
然后 就 有 失 考 虑 地 扔 到 界面 中 去 。 成 千 上 万 的 表单 几乎 都 一 模 一 样 ， 它 
们 没有 反馈 机 制 ， 没 有 即时 校 验 ， 也 之 不 考虑 是 否 能 支持 用 户 的 思维 横 
式 。 


尽管 每 开始 设计 一 个 新 的 表单 时 ， 我 总 是 认为 只 是 再 寻常 不 过 的 又 一 个 
表单 而 已 ， 但 实际 上 在 每 次 结束 时 我 总 会 很 享受 。 因 为 即使 是 一 个 简单 
的 注册 表单 也 同样 会 有 需求 和 约束 ， 以 及 各 种 挑战 。 每 一 个 表单 在 设计 
出 来 后 都 会 和 以 往 的 有 些 不 同 。 


我 留意 过 很 多 人 使 用 过 很 多 表单 ， 而 且 了 解 到 什么 样 的 表单 会 让 人 觉得 
沉闷 无 聊 ， 又 是 什么 样 的 表单 让 人 用 起 来 不 会 感到 丝毫 痛苦 ， 甚 至 会 成 
为 愉悦 的 享受 。 

正 因 为 如 此 ， 我 会 向 你 们 讲述 几 个 关于 设计 表单 的 故事 ， 从 最 简单 的 说 
到 最 复杂 的 。 这 些 故 事 针 对 的 内 容 包 括 表单 排版 、 即 时 校 验 、 分 步 拆 分 
长 表单 、 标 签 、 找 回 密码 ， 甚 至 还 包括 表单 间 相 互 控制 条 件 。 

如 果 运 气 好 ， 你 们 将 会 开始 用 一 种 全 新 的 眼光 来 看 竺 表单， 并 且 意 识 到 
它们 对 用 户 体验 将 造成 难以 置信 的 影响 。 

不 过 首先 ， 证 我 们 还 是 看 一 眼 如 何 改 进 视频 播放 噩 来 帮助 用 户 在 互联 网 
上 操作 视频 文件 。 
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我 们 对 于 通过 互联 网 操作 视频 文件 早已 司空 见 惯 。 开 发 者 只 需要 创建 一 
个 用 于 播放 控制 视频 文件 的 界面 ， 然 后 就 能 把 各 种 视频 注入 到 播放 器 里 
面 去 。 但 出 于 茶 些 原因 ， 各 种 在 线 视频 播放 器 相互 之 间 和 世界 上 其 他 万 
物 一 样 干 差 万 别 。 


YouTube. Yahoo. CNN. NYTimes 等 网 站 都 有 很 不 错 的 播放 器 ， 其 设计 
几乎 轻易 就 能 成 为 业界 标准 。 但 是 大 多 数 开 发 者 似乎 并 不 爱 从 主流 站 点 
吸取 经 验 ， 也 不 愿 自 己 的 网 站 受 其 影响 。 当 然 ， 仍 有 一 些 主流 网 站 似乎 
正在 相互 学 习 ， 逐 步 趋 近 于 找到 一 种 更 为 标准 的 方法 来 规范 视频 操作 。 
而 这 正 是 我 们 现在 所 要 探讨 的 地 方 。 我 们 将 看 看 网 上 那些 最 经 常 使 用 的 
播放 器 是 如 何 设 计 的 ， 并 以 此 党 试 创 造 出 一 种 博 采 众 家 之 长 、 在 绝 大 部 
分 情况 下 都 能 顺利 运作 的 播放 器 。 
尽管 我 曾经 是 一 个 Adobe 的 Flash 开发 人 员 ， 但 并 没有 什么 客户 请 我 设 
计 视 频 播放 器 。 所 以 我 纯粹 只 是 为 了 好 玩 而 设计 了 一 款 。 我 相信 它 在 各 
种 网 站 和 应 用 程序 中 都 能 完美 运作 。 


通过 这 个 例子 我 希望 告诉 你 们 ， 对 那些 已 经 重复 百 万 这 的 
和 改进 是 件 多 么 简单 的 事情 。 


C12.1 拨 开 VCR 设计 的 迷雾 


要 想 改进 视频 播放 锅 ， 你 必须 先 透 彻 地 了 解 现 有 播放 需 的 设计 。 因 此 让 
我 们 来 看 看 一 些 最 著名 的 播放 需 。 


HA NYTimes.com "的 播放 器 ， 如 图 12-1 所 示 。 
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CD 网 址 为 http://video.on.nytimes.com/。 一 一 译 者 注 
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图 12-1 





这 是 一 个 相当 有 代表 性 的 视频 播放 器 ， 显 示 了 视频 的 长 度 、 当 前 已 播放 











时 间 、 音 量 控件 、 播 放 / 暂停 按钮 ， 以 及 一 个 进度 条 。 但 是 ， 有 代表 性 


并 不 意味 着 没有 问题 。 








首先 ， 它 的 滑 块 按钮 〈 在 视频 时 间 轴 上 用 于 拖 动 的 滑 柄 )》 看 上 去 极其 难 
以 使 用 。 它 又 窄 又 小 ， 简 直到 了 可 笑 的 地 步 。 而 实际 上 该 滑 柄 的 啊 应 范 










































































围 其 实 还 亦 大 的， 但 视觉 上 感觉 实在 太 难 点 击 。 我 相信 这 上 
开始 就 给 用 户 留 下 一 种 难以 使 用 的 印象 。 




























































































手 部 活动 不 便 的 用 户 ， 在 移动 那些 需要 精准 度 的 控件 方面 可 
CNN.com "的 视频 播放 器 也 有 类 似 的 问题 ， 见 图 12-2. 
































857 


有 EE 肯定 会 在 


其 次 ， 音 量 控件 的 滑 块 大小。 上 年 纪 的 用 户 ， 尤 其 是 那些 患 了 关节 炎 或 


能 会 有 麻烦 。 














音量 滑 块 太 小 ， 很 难 操 作 。 文 本 也 太 小 ， 凡 有 轻微 视力 问题 的 用 




















难 阅读 。 
尽管 这 样 ，CNN.com 播放 器 还 是 有 很 多 东西 让 我 相当 喜欢 。 











Oz 网址 为 http:Wwww.cnn.com/video/。 一 一 译 者 注 





户 都 很 
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图 12-2 


首先 ，CNN 抵制 住 了 自动 播放 视频 的 冲动 。 这 意味 着 在 页 面 一 开始 载 入 
的 时 候 占 用 的 带宽 更 少 ， 同 时 也 意味 着 那些 不 想 看 视频 的 用 户 无 需 被 迫 
手动 停止 视频 ， 从 而 能 够 安静 地 阅读 页 面 。 


其 次 ， 页 面 载 入 后 ， 播 放 器 在 视频 框 的 正中 心 提供 了 一 个 大 大 的 播放 按 
钮 。 它 提示 用 户 当 前 显示 的 图 像 并 不 是 静态 图 片 ， 而 是 来 自视 频 ( 男 一 
个 提示 是 播放 器 控件 的 可 视 化 设置 )。 同 时 如 果 用 户 选择 观看 视频 的 话 ， 
它 也 提供 了 一 种 简单 、 明 显 的 方式 让 他 们 点 击 播放 。 一 个 按钮 做 了 两 件 
事 。 如 图 12-3 所 示 。 
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YouTube 的 播放 器 同样 也 提供 了 一 个 大 播放 按钮 (图 12-4 中 显示 的 播放 
器 是 我 们 经 常 在 YouTube 之 外 其 他 网 站 上 看 到 的 嵌入 式 版 本 ) "。 


























n. Tube 


图 12-4 





然而 ，YouTube 播放 器 也 有 一 些 问 题 。 
首先 ， 尽 管 单 击 视频 框 正 中 的 Play (播放 ) 按钮 可 以 直接 播放 页 面 中 的 





























视频 ,但 如 果 和 暂停 后 再 次 单 击 视频 框 时 ， 却 突然 会 弹出 一 个 新 窗口 链接 


$ 


c— 














图 12-5. 


BE 














— 


] 户 也 许 能 够 习惯 YouTube 这 种 与 其 他 网 站 不 同 的 时 间 显 示 方 式 ， 但 并 








YouTube 网 站 中 去 。 这 一 点 打破 了 用 户 的 预期 ， 因 为 他 们 认为 单 击 视 
频 框 自然 会 开始 播放 。 


其 次 ， 播 放 时 间 那 里 仅仅 只 显示 了 剩余 时 间 ， 而 不 是 视频 的 整个 时 间 2 。 



























































没有 什么 理由 一 定 要 有 这 种 不 同 。 











(D BI 12-4 H 


youtube. com/ watch?v- VO6XEQIsCoM. 
Q2) 现在 YouTube 播放 器 在 该 问题 上 已 有 所 改进 。 译 者 注 








PP 的 视频 名 为 The Paradox of Choice (Barry Schwartz)。 网 址 为 http://www. 
译 者 注 
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图 12-5 








而 且 ， 很 明显 ， 文 字 和 控件 都 非常 小 。 


最 后 ， 视 频 的 标题 并 不 在 仍 入 播放 器 里 。 所 以 当 有 人 想 在 自己 网 站 或 博 
s eu ieee 






























































是 什么 。 这 通常 也 意味 着 他 们 需要 来 回 切换 浏览 器 窗口 ， 逐 字 地 确认 视 
频 名 称 并 写 下 来 。 

















YouTube 成 功 的 秘诀 不 正 是 那 种 可 以 随处 嵌入 的 能 力 吗 ? 正 是 由 于 这 种 
功能 ， 你 才能 在 自己 的 网 站 上 和 自己 的 观众 分 享 。 那 么 他 们 为 什么 要 把 
视频 的 标题 排除 在 外 呢 ? 把 它 放 在 播放 器 里 面 难道 不 会 让 上 述 这 个 过 程 
更 为 简便 吗 ? 














































































































总 而 言 之 ， 这 些 播放 器 中 的 每 一 个 都 做 对 了 一 些 事 ， 但 还 有 些 事 又 做 得 


不 是 很 漂亮 。 而 我 们 就 是 要 总 结 并 学 习 所 有 它们 干 得 不 错 的 地 方 。 
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12.1.1 且慢 一 一 还 有 做 得 更 好 的 


我 还 想 谈 谈 另 一 款 播放 器 ， 它 来 自 于 一 个 并 不 是 很 流行 的 网 站 ， 但 却 让 
我 非常 欣赏 。 这 款 播放 器 来 自 于 TED.com， 传 奇 般 的 TED Talks “的 视频 
版 本 网 站 ， 如 图 12-6 所 示 。 
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图 12-6 

















这 里 ，Al Gore 正在 演讲 我 们 如 何 才能 协助 减缓 全 球 气 候 和 危机 的 问题 。 


控件 的 尺寸 相当 合适 ， 标 准 的 字体 大 小 让 文本 更 易 阅 读 ， 而 左上 角 还 提 
供 了 一 些 关 于 视频 的 附加 信息 ， 例 如 ， 录 制 和 发 布 的 具体 时 间 。 
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(D TED Talks 来 自 于 TED (Technology. Entertainment 和 Design3 个 单词 的 首 字母 )。 
ÉI 1984 年 开始 ，TED 以 定期 会 议 的 形式 聚集 技术 、 娱 乐 和 设计 界 的 人 士 分 享 并 传 
播 创意 。TED.com 是 TED 于 2006 年 发 布 的 免费 视频 网 站 ， 汇 集 了 200 余 个 精彩 的 
演讲 视频 。 译 者 注 
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(TED 不 需要 在 播放 器 中 包含 视频 的 标题 ， 因 为 TED 视频 不 能 直接 嵌入 
到 其 他 网 页 ， 除 非 你 找到 了 它们 的 YouTube 版 本 。 这 颇具 讽刺 意味 ， 不 


是 吗 ? ) 


于 视频 的 长 度 超过 了 16 分 钟 ， 它 被 很 贴心 地 划分 成 数 个 章节 ， 而 用 户 
] 以 通过 播放 器 的 菜单 系统 来 跳 轻 到 其 中 的 任意 部 分 。 见 图 12-7。 
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图 12-7 


相当 不 错 ， 对 吧 ? 你 所 要 做 的 只 是 把 鼠标 移动 到 视频 框 上 ， 这 个 菜单 系 
统 就 会 自动 出 现 。 


TED 播放 器 我 发 现 的 唯一 的 大 问题 就 是 它 没有 提供 必要 的 提示 ， 让 用 
明白 只 要 鼠标 悬 停 在 视频 框 上 就 会 出 现 菜单 系统 ， 从 而 能 够 在 音节， 
供 导 航 。 用 户 上 只 有 在 偶然 把 鼠标 《也许 是 其 他 什么 原因 ) 移动 到 视频 
才 会 知道 有 这 一 功能 。 


另 一 个 小 问题 是 时 钟 图 标 过 小 ， 它 对 于 任何 视力 低 于 20/20《〈 正 常 视力 标 
EO 的 用 户 都 很 可 能 会 这 无 用 处 。 而 没有 时 钟 图 标的 话 ， 人 们 只 能 假设 
这 些 数 字 是 和 时 间 相 关 的 。 在 没有 明确 标记 的 情况 下 ， 用 户 必 须 去 思考 
数字 代表 什么 ， 而 人 类 似乎 又 总 是 在 逃避 思考 。 
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12.1.2 ”博采众长 

















总 的 来 看 ，TED.com 的 这 个 可 以 说 是 网 上 最 好 的 一 个 播放 器 了 。 因 此 它 
是 一 个 很 好 的 起 点 ， 让 我 们 开始 设计 一 款 新 的 、 能 在 绝 大 多 数 环 境 中 通 








、 











j 的 播放 器 。 


为 了 让 它 更 通俗 有 效 ， 我 需要 调整 儿 处 我 认为 不 太 合 适 的 地 方 ， 然 后 把 
Ratings 《评级 ) 按钮 去 掉 ， 换 成 章节 导航 的 荣 单 系统 入 口 。 


简 而 言 之 ， 我 希望 做 成 如 图 12-8 所 示 的 样子 。 
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(u) 器 Time: 2:05 / 16:23 Chapters 





图 12-8 











这 个 版 本 中 ， 我 在 左上 角 加 上 了 视频 标题 ， 用 Time 时间) 标记 替换 了 
之 前 小 的 时 钟 图 标 ， 然 后 把 Ratings 按钮 变 成 了 Chapters (Œ) 按钮 。 





















































现在 ， 单 击 Chapters 按钮 将 会 打开 菜单 系统 ， 以 便 选择 视频 中 的 任 一 章 
"T. WA 12-9. 
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图 12-9 























Hh. dul 


现在 ， 这 款 播放 器 提供 了 所 需要 的 一 切 核心 功能 、 相 对 更 易 用 的 控件 、 
， 以 及 视频 的 相关 信息 长度、 已 播放 时 间 、 标 题 以 及 








但 在 你 开始 考虑 划分 视频 章节 所 需要 付 时 
并 不 是 每 一 个 视频 都 有 或 者 需要 划分 音节。 


所 以 我 为 播放 器 又 添加 了 一 条 规则 : 如 果 没 有 章节 ， 就 去 掉 Chapters {X 


清晰 可 辨 的 文本 















































图 12-10 所 示 。 












































录制 和 发 布 的 日 期 )。 
最 后 ， 我 决定 把 它 设置 为 默认 停止 状态 ， 避 免责 面 载 入 时 讨厌 的 


放 问 题 。 



























































8 的 额外 工作 之 前 ， 我 必须 指出 ， 


z 
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动 播 








然后 在 视频 框 的 中 心 加 上 一 个 又 大 又 漂亮 的 播放 按钮 ， 只 要 视 
频 停止 时 它 就 会 出 现 。 





96 第 12 章 视频 播放 器 的 标准 化 


Al Gore: 15 ways to avert a climate crisis 
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(u) "i Time: 2:05 / 16:23 





图 12-10 


搞定 ! 
曙 一 如果 什 么 时 候 需 要 为 你 的 网 站 设计 一 款 视频 播放 器 ， 给 我 电话 。 
我 已 经 为 你 准备 好 了 相当 棒 的 一 款 。 

噢 ， 现 在 就 有 电话 来 了 。 
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妥 洱 运 ， 我 们 在 网 上 遇 到 的 绝 大 多 数 表单 部 不 算 很 长 。 它 们 仅 仪 包含 一 
表单 域 ， 也 许 还 有 1 工 到 2 个 下 拉 荣 单 ， 再 加 上 一 个 按钮 。 而 且 它们 能 
助 我 们 完成 想 做 的 事 ， 让 我 们 能 在 某 个 新 的 网 站 或 应 用 上 注册 、 购 买 
商品 或 者 联系 某 家 公司 。 


日 你 想 过 没有 ， 就 连 一 个 短 短 的 表单 这 样 的 东西 ， 为 什么 在 不 同 的 网 站 
里 看 上 去 差异 会 如 此 之 大 呢 ? 


有 些 表单 布局 成 两 列 ， 标 签 呈 左 对 齐 ， 还 有 一 些 则 是 呈 右 对 齐 。 另 外 一 
些 表 单 只 有 一 列 ， 而 标签 位 于 表单 域 的 上 方 居 左 对 齐 。Submit (提交 ) 
和 Cancel. (取消 ) 等 按钮 要 么 在 表单 左 侧 要 么 在 右 侧 ， 有 了 时候 Submit 在 
Cancel 左边 ， 有 时候 又 在 它 右边 。 还 有 标签 ……: 唤 ， 别 让 我 说 标签 ， 根 
本 就 说 不 完 。 

很 无 奈 。 这 么 简单 的 事情 都 会 千差万别 。 


很 多 情况 下 ， 这 些 千姿百态 的 设计 只 是 单纯 客观 条 件 下 的 产物 。 也 许 是 
因为 设计 师 认为 在 页 面 上 标签 右 对 齐 会 更 美观 ， 应 该 为 了 配合 页 面 来 设 
计 表 单 而 不 是 围绕 表单 来 设计 页 面 。 或 者 是 因为 开发 人 员 总 习惯 于 以 自 
己 网 站 上 的 表单 布局 方式 来 为 所 有 其 他 网 站 布局 。 还 有 更 甚 者， 也许 只 
是 某 个 人 直接 从 另 一 个 网 站 复制 粘贴 了 代码 ， 而 又 懒得 修改 。 


不 管 出 于 什么 理由 ,但 其 实 哪怕 是 没有 经 过 专门 设计 的 表单 ， 同 样 也 可 
能 创建 美好 瞬间 ， 从 而 为 用 户 整体 的 操作 体验 做 出 贡献 。 不 过 很 多 表单 
都 错过 了 这 个 机 会 。 

你 也 许 没有 意识 到 这 一 点 。 事 实 上 ， 每 一 种 布局 都 会 对 用 户 使 用 表单 
(以 及 你 的 网 站 〉 产生 积极 或 者 消极 的 影响 。 而 在 正确 的 时 间 选 用 正确 的 
布局 ， 才 是 提升 用 户 操作 体验 的 关键 ， 而 且 这 也 很 容易 做 到 。 
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C13.1 设计 出 行云流水 般 的 表单 


表单 需要 呈现 出 延续 的 流动 性 ， 而 表单 的 布局 则 极 大 地 影响 到 用 户 是 否 
能 够 成 功 地 填写 表单 。 例 如 下 面 这 个 为 某 在 线 社区 网 站 设计 的 注册 表单 。 


这 个 表单 只 需要 收集 用 户 的 真实 姓名 、 电 子 邮件 地 址 、 他 们 希望 的 用 户 
名 和 密码 ， 以 及 必要 的 信用 卡 信息 。 


我 完 考虑 了 两 列 的 布局 ， 标 签 居 左 对 齐 。 如 图 13-1 所 示 。 





Register 





First name: 








Last name: 








Email address: e.g. me&mydomain.com 





New password: 








Confirm new password: 








Name on card: 



































Card #: 
Expiration: 01 |#| |07 |* 
Security code: pe] 











图 13-1 


这 使 得 表单 很 好 看 ， 也 很 简短 ， 看 上 去 所 有 内 容 都 能 在 页 面 上 以 Above 
the fold 的 形式 呈现 〈 位 于 默认 的 可 视 区 域 ， 无 需 滚动 条 )， 然 而 这 种 布 
局 方式 较 之 其 他 布局 却 更 容易 引发 错误 。 因 为 在 第 一 列 和 第 二 列 ， 也 就 





(D Above the fold 这 一 术语 尚 无 准确 的 中 文 翻译 ， 该 词 起 源 于 报纸 的 排版 原则 。Fold 
原意 为 报纸 被 折 且 起 来 的 部 分 ， 排 版 人 员 应 力图 避免 重要 文章 《如 头条 新 闻 ) 的 标 
题 、 内 容 或 图 片 横 跨 折 革 处 从 而 造成 浏览 者 阅读 不 便 。 这 一 概念 在 Web 领域 中 则 取 
决 于 用 户 显 示 器 分 辩 率 的 Y 轴 大 小 。 译 者 注 
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是 字段 标签 〈 例 如 电子 邮件 ) 和 与 其 对 应 的 输入 域 间 的 映射 关系 很 不 明 
显 。 

旦 左右 两 列 的 布局 同时 也 降低 了 用 户 往 下 浏览 的 速度 。 如 果 是 那 种 需要 
仔细 阅读 的 表单 ， 可 能 这 样 会 很 好 ， 但 是 也 同样 容易 引发 错误 。 而 作为 
标准 的 注册 表单 来 说 ， 我 们 没有 必要 去 减缓 用 户 往 下 浏览 的 速度 。 于 是 
我 先 考 虑 了 右 对 齐 版 本 ， 如 图 13-2 所 示 。 


Register 





First name: | 








Last name: | 








Email address: |e.g. me@mydomain.com | 








New password: | 








Confirm new password: | 








Name on card: | 
Card #: | 
Expiration: |01 || |07 |$ 























Security code: tB 








图 13-2 


标签 居 右 对 齐 时 ， 用 户 不 会 像 左 对 齐 时 那么 容易 犯错 ， 因 为 标签 和 输入 
域 之 间 更 为 接近 。 然 而 ， 右 对 齐 的 标签 在 页 面 的 左 侧 形 成 了 一 道 难 看 的 、 
锯齿 状 的 边缘 ， 这 种 平衡 性 的 失调 完全 没有 吸引 力 。 男 外 ， 不 管 标签 如 
何 摆 放 ， 两 列 的 布局 仍然 会 减缓 用 户 往 下 浏览 的 速度 。 


所 以 我 决定 直接 把 布局 变 成 一 列 来 显示 ， 而 标签 则 放 在 每 个 输入 域 的 上 
F, EAX. JLB] 13-3. 
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Register 


First name: 








Last name: 








Email address: 
e.g. me ?mydomain.com 








New password: 








Confirm new password: 








Name on card: 



































Card #: 

Expiration: Security code: 
01 J] [oz F] | = 
(_ OK . Cancel. 








图 13-3 


这 种 布局 让 用 户 只 用 花 最 少 的 时 间 就 能 将 标签 和 输入 域 对 应 起 来 ， 因 此 
浏览 速度 比 两 列 布局 要 快 不 少 。 用 户 只 需 在 同一 个 方向 移动 视线 就 能 

到 标签 和 输入 域 ， 而 不 用 先 阅读 左 列 的 标签 然后 再 将 一 眼 右 侧 的 输入 域 。 
这 样 改善 了 的 分 组 ， 使 单列 布局 同样 也 能 减少 错误 的 发 生 。 


我 设计 的 大 部 分 表单 都 使 用 了 单列 布局 ， 标 签 位 于 输入 域 的 上 方 居 左 对 
齐 。 我 时 常 考虑 表单 的 布局 会 怎样 影响 到 用 户 与 之 交互 的 瞬间 ， 而 最 后 
总 是 选择 了 这 种 布局 方式 。 只 在 很 少 的 情况 下 我 才 会 有 意 地 在 用 户 填写 
表单 时 减缓 他 们 往 下 浏览 的 速度 ， 而 这 种 时 候 我 通常 更 多 依靠 的 是 优秀 
的 校 验 技 术 ， 而 不 是 真 去 给 他 们 造成 不 便 。 我 们 会 在 第 15 章 再 讨论 这 个 


问题 。 
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C13.2 让 “确定 /取消 ”更 完美 


哪怕 最 简单 的 表单 也 有 个 地 方 可 能 会 诱导 用 户 犯错 误 。 那 就 是 在 它们 最 
下 方 出 现 的 讨厌 的 OK/Cancel (确定 /取消 ) 按钮 。 


网 络 上 OK 和 Cancel 按钮 无 处 不 在 。 当 然 ， 它 们 并 不 总 是 标记 为 OK 和 
Cancel， 也 不 一 定 每 次 都 是 同样 的 用 途 ， 但 是 我 们 每 个 人 都 曾 遇 到 过 上 
百 万 次 了 。 这 两 个 按钮 的 组 合 简 直 是 横扫 天 下 ， 也 出 于 一 个 很 不 错 的 理 
由 : 在 Web 应 用 中 几乎 你 的 任何 行为 都 能 够 取消 。 


我 们 经 常 在 那 种 可 以 往返 的 交互 中 看 到 它们 。 用 户 从 第 一 页 开始 ， 然 
后 在 第 二 页 完成 交互 ， 如 果 单 击 Cancel 则 回 到 第 一 页 。 它 们 也 会 出 现 
在 同一 个 页 面 内 的 即时 交互 中 ， 例 如 在 某 些 在 线 工 具 网 站 上 修改 个 性 
设置 。 

这 对 按钮 最 有 代表 性 的 就 是 陈列 为 两 个 并 列 的 按钮 ， 而 且 采 用 标准 的 浏 
响 需 控件 外 观 。 这 种 设计 可 翡 地 持续 了 很 多 年 ， 而 且 应 用 于 无 数 个 应 用 
程序 中 。 


我 们 这 个 表单 也 以 这 种 最 具 代 表 性 的 按钮 套装 开始 。 如 图 13-4 所 示 。 



































图 13-4 





本 例 中 用 户 交 互 的 目标 是 注册 ， 就 这 么 简单 。 但 是 任何 一 个 设计 问题 都 
可 能 有 无 数 种 方式 来 解决 ， 而 即使 是 在 这 个 最 简单 的 例子 里 ， 也 同样 需 
要 做 几 个 决定 。 


第 一 要 决定 按钮 的 位 置 。 居 左 对 齐 还 是 居 右 对 齐 对 于 可 用 性 来 说 并 没有 
很 大 的 影响 ， 但 是 因为 下 述 理 由 我 一 般 仍然 坚持 把 它们 放 在 左边 。 


首先 ， 左 对 齐 使 所 有 元 素 都 依靠 左边 缘 顺 势 而 下 ， 从 表单 顶部 到 底部 形 
成 了 一 条 好 看 的 直线 。 其 次 这 也 是 一 种 美学 上 的 选择 ， 因 为 看 上 去 它 为 
表单 建立 了 一 个 视觉 上 的 支撑 点 。 在 完成 每 一 处 表单 域 后， 你 会 继续 规 
则 性 地 往 下 移动 。 把 动作 按钮 放 在 表单 的 尾部 看 上 去 就 好 像 把 一 切 都 钉 
牢固 定 下 来 。 当 然 这 也 许 只 是 我 的 个 人 感觉 。 
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第 二 要 决定 按钮 上 的 文字 。 当 然 ， 在 绝 大 部 分 情况 下 ， 使 用 标准 的 OK 
和 Cancel 最 为 省 事 ， 因 为 你 不 用 作 任 何 考 虑 ， 就 这 么 标记 也 完全 可 以 过 
关 。 但 是 这 两 个 术语 真 的 能 带 来 帮助 吗 ? 


OK 在 大 多 数 时 间 里 都 能 正常 工作 ， 但 是 意义 更 明显 的 按钮 标记 能 更 好 地 
帮助 用 户 建立 对 点 击 结果 的 期 望 。 


这 个 例子 中 单 击 OK 会 发 生 什 么 呢 ? 它 将 把 这 位 浏览 者 注册 为 网 站 的 一 
个 新 用 户 。 但 在 这 个 网 站 的 其 他 地 方 ，OK 也 许 意味 着 保存 某 项 设置 ， 或 
者 上 传 某 个 文件 。 

单 击 OK 不 能 使 用 户 建立 起 一 个 清晰 的 期 望 。 幸 和 运 的 是 ， 标 记 按 钮 并 不 
是 一 件 很 难 的 事情 。 我 所 要 做 的 只 是 把 按钮 上 的 文字 改 成 Register Now 
(现在 注册 〉 而已， 相当 简单 ， 见 图 13-5. 















































( Register now ) ( Cancel ) 








13-5 


13.2.1 首选 处 理 方式 和 第 二 处 理 方式 

这 一 部 分 要 考虑 的 最 后 一 件 事 ， 可 能 对 于 设计 师 来 说 常常 是 毋庸 置疑 的 。 
那 就 是 我 们 经 党 赋予 这 两 个 按钮 同等 的 重要 性 ， 而 它们 却 会 引发 完全 不 
同 的 结果 。 一 个 用 于 用 户 注册 ， 另 一 个 则 取消 整个 操作 《〈 这 个 例子 中 将 
把 用 户 带 回 到 首页 )， 但 两 个 按钮 在 外 观 上 却 一 模 一 样 。 

我 能 理解 这 种 传统 形成 的 原因 。 两 个 选项 分 别 对 应 于 两 个 按钮 。 然 而 ， 
重要 的 并 不 是 选项 的 数量 ， 而 是 哪 一 个 选项 才 是 最 可 能 的 选择 。 

对 于 决定 在 网 站 注册 并 且 填 写 表单 的 用 户 来 说 ， 他 最 有 可 能 选择 去 单 击 
OK。 这 被 称 为 首选 处 理 方式 (Primary Action )。 而 取消 整个 注册 过 程 则 
是 不 太 可 能 的 选择 ， 它 被 称 为 第 二 处 理 方式 〈Secondary Action). 

然而 ， 如 果 两 个 按钮 都 被 赋予 了 同等 的 视觉 重要 性 ， 那 么 用 户 则 必须 阅 
读 按 钮 上 的 标记 ， 而 且 两 个 按钮 都 得 阅读 以 便 决 定 应 该 点 击 哪 一 个 。 
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费 获 法 则 (Fitts”Law)“ 指 出， 点 击 某 个 目标 所 花费 的 时 间 可 以 通 
一 个 孔 数 来 求 值 ， 它 与 “鼠标 与 目标 的 距离 ”和 “目标 尺寸 ”密切 
关 。 根 据 这 一 法 则 ， 我 们 最 好 的 解决 办 法 就 是 从 第 二 处 理 方式 ， 也 就 
Cancel 按钮 上 减弱 一 些 注意 力 。 于 是 我 把 它 变 成 了 一 个 文字 链接 ， 如 图 
13-6 所 示 。 

















Rm zh 尝 











CRegisternow ) Cancel 





图 13-6 


这 样 一 来 ，Register Now 按钮 变 得 更 为 突出 、 也 易于 点 击 了 ， 同 时 Cancel 
链接 也 不 再 那么 明显 ， 相 比 之 下 不 那么 容易 点 击 到 了 。 


这 两 个 按钮 是 不 是 变 得 很 难看 到 ? 没有 。 但 对 用 户 来 说 ， 现 在 点 击 失误 
倒是 不 再 那么 容易 了。 用户 的 视线 会 被 牵引 到 大 的 按钮 上 去 ， 而 且 它 很 
容易 让 人 下 意识 地 认识 到 大 的 按钮 很 可 能 就 是 首选 的 处 理 方式 。 如 果 那 
正 是 用 户 想 要 的 ， 他 们 几乎 都 不 需要 去 阅读 按钮 上 的 文字 。 如 果 用 户 想 
要 的 是 第 二 种 选择 ， 他 们 也 能 轻易 推断 出 不 突出 的 那个 选项 就 是 Cancel 
链接 。( 然 而 有 点 可 筑 的 是 ， 在 两 个 按钮 间 创 造 视觉 上 的 差异 将 使 得 它们 
T NE RESTAN E 够 在 不 需 仔细 阅读 标记 的 情况 下 就 能 推断 
出 它们 的 含义 ， 他 们 反而 更 想 去 阅读 这 些 文字 。) 


顺便 说 一 句 ， 这 也 是 我 喜欢 让 按钮 居 左 对 齐 的 男 一 个 理由 。 
如 图 13-7 所 示 ， 把 大 HTML 按钮 与 其 上 的 表单 域 对 齐 ， 看 上 去 明显 比 让 
Cancel 链接 与 上 面 居 右 对 齐 要 好 得 多 。 


另外 ， 为 什么 要 把 按钮 放 在 左边 而 文字 链接 放 在 右边 呢 ? 因为 那些 使 用 
Tab 键 切 换 输入 域 的 用 户 将 先 到 达 Register Now 按钮 。 这 再 一 次 验证 了 我 
们 应 将 焦点 集中 在 可 能 性 更 大 的 选项 上 ， 同 时 降低 用 户 在 可 能 性 较 小 的 
选项 上 的 注意 力 。 


































































































O 费 区 法 则 是 人 机 交互 领域 里 一 个 非常 重要 的 法 则 ，10 年 来 得 到 了 广泛 的 应 用 。 
基本 的 观点 就 是 当 一 个 人 用 鼠标 移动 指针 时 ， 屏 幕 上 目标 的 某 些 特征 会 使 得 点 击 
得 轻松 或 者 困难 。 目 标 离 得 越 远 ， 到 达 就 越 费劲 。 目 标 越 小 ， 就 越 难点 中 。 表 达 这 
一 概念 的 公式 为 : Time = a + b log2 (D/S + D). Erb, Time 代表 “从 鼠标 到 达 目 标 
的 时 间 ”; D 代表 “鼠标 达到 目标 的 距离 ”; S 代表 “目标 的 尺寸 ”。 
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Name on card: 





























Card #: 

Expiration: Security code: 
01 E| [o7 F] 一 
CRegisternow.) Cancel 





图 13-7 


13.222 ”这 很 重要 


现在 ,和 干 万 不 要 再 弄 错 了 。 对 于 任何 一 种 布局 来 说 ， 完 成 表单 花费 的 时 
间 多 几 秒 或 者 少 几 秒 ， 并 不 会 对 用 户 体验 造成 很 大 的 影响 。 归 根 结 底 ， 
最 重要 的 不 是 在 这 一 过 程 中 抠 出 那 珍 贵 的 数秒 钟 ， 而 在 于 完成 表单 所 带 
来 的 价值 是 否 能 超过 填写 表单 时 给 用 户 带 来 的 麻烦 和 沉闷 。 


在 一 开始 劝说 用 户 填 写 表单 是 整个 注册 过 程 中 最 困难 的 部 分 。 而 一 旦 你 
做 到 了 这 一 点 ， 就 应 当 像 对 待 真正 用 户 那 样 尽 可 能 地 善待 他 们 。 在 表单 
的 设计 中 考虑 每 一 种 方案 间 细 微 的 区 别 ， 也 就 是 真正 注意 到 每 一 处 细节 ， 
这 将 会 为 用 户 创造 另 一 个 平滑 顺畅 的 瞬间 。 而 每 一 个 瞬间 都 会 对 整体 的 
用 户 体验 做 出 贡献 。 

如 果 你 正在 花费 所 有 的 时 间 和 精力 来 创建 某 个 Web 应 用 ， 为 什么 要 把 自 
己 网 站 的 表单 设计 扔 给 运气 或 者 客观 环境 去 评判 呢 ? 主动 地 去 考虑 和 研 
究 ， 你 必定 会 收获 更 多 愉快 的 用 户 。 
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我 曾 参 与 过 一 个 广告 宣传 运作 管理 系统 的 设计 工作 。 其 中 创建 宣传 活动 
的 流程 需要 一 系列 用 户 以 特定 顺序 填写 表单 。 用 户 首先 需要 创建 一 个 活 
动 ， 包 括 指 定 活动 名 称 、 开 始 和 结束 日 期 以 及 其 他 相关 信息 ， 然 后 ， 
才能 在 该 活动 中 创建 广告 并 设置 经 费 额 度 等 。 


桌面 应 用 和 Web. 应 用 一 样 ， 它 们 经 常 都 会 包含 一 些 必须 以 线性 方式 逐步 
完成 的 操作 流程 。 而 Wizard 向 导 通 常 被 用 来 解决 类 似 的 问题 。 它 是 一 种 
多 步骤 的 交互 方式 ， 用 于 引导 用 户 一 步 一 步 地 通过 那些 有 固定 顺序 的 处 
理 过 程 ， 并 且 通 常 被 用 来 解决 类 似 的 问题 。 


目前 ， 基 本 上 任何 古老 的 Wizard 向 导 设 计 都 能 帮助 用 户 完 成 这 种 过 程 。 
但 是 有 良好 的 指示 天 为 用 户 预 期 表单 复杂 度 提 供 线索 ， 更 能 够 增进 用 户 
的 信心 ， 并 且 能 为 交互 创建 一 种 清晰 、 易 于 理解 的 瞬间 。 

有 具体 地 说 ， 我 们 可 以 通过 提供 一 系列 “路 标 ” 来 为 用 户 建 立 清晰 的 预 
期 。 


014.1 建立 清晰 的 预期 
首先 让 我 们 考虑 当 Wizard 向 导 和 缺乏 必要 的 指示 器 时 会 发 生 什 么 。 


图 14-1 的 界面 中 唯一 能 告诉 你 这 步 操 作 并 不 是 整个 交互 最 后 一 步 的 元 素 
是 Next( 下 一 步 ) 按钮 。 这 里 没有 任何 东西 能 让 你 知道 创建 整个 宣传 活 
动 总 共 需 要 多 少 个 步 又 。 
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Campaign setup 


Campaign name: 











Start date: End date: 
L] 03/0310 L] 03/03/11 


Geographical area: 
| United States B 











Language for the ads: 
| United States < 


( . Nex  ) 

















图 14-1 


在 这 个 设计 中 ， 你 填写 完 页 面 中 的 表单 然后 单 击 Next. F-RA 
入 一 个 新 页 面 ， 然 后 填写 表单 ， 再 次 单 击 Next， 等 在 它 后 面 的 又 是 另 一 
个 表单 。 你 在 事先 肯定 没有 预料 到 这 一 点 ， 所 以 每 当 看 到 另 一 个 Next 按 
钮 时 ， 你 都 会 被 迫 去 猜想 为 了 完成 这 个 创建 过 程 到 底 还 需要 多 少 个 步 又 。 


我 到 哪 一 步 了 ? 还 有 多 少 步 ? 每 一 步 有 多 长 ? 填 完 这 些 是 不 是 还 需要 很 
长 时 间 ? 我 是 否 应 该 取消 今天 的 晚餐 计划 ? 


这 对 用 户 建立 自信 心 真 没什么 帮助 。 

你 也 能 很 轻易 地 去 除 用 户 的 挫败 感 ， 只 需要 为 他 们 建立 期 望 ， 让 他 们 预 
先知 道 总 共有 多 少 个 步 又。 

同时 我 们 也 应 该 告诉 他 们 去 过 哪里 ， 现 在 在 哪里 ， 将 来 还 要 到 哪里 。 

这 很 简单 ， 有 点 像 为 每 个 步骤 加 上 一 个 描述 标题 栏 。 图 14-2 里 面 的 标题 
栏 指出 共有 4 个 步骤， 用 户 此 刻 正 处 于 第 一 步 ， 而 第 一 步 是 关于 Create a 
campaign 〈 创 建 一 个 活动 )。 

仅 这 一 点 就 是 个 很 大 的 进步 ， 不 过 它 还 可 以 变 得 更 有 效果 。 

将 所 有 步骤 的 名 称 都 展现 给 用 户 将 会 更 有 帮助 。 通 过 这 种 方式 用 户 可 以 
随时 将 一 眼 自己 正在 哪个 阶段 ， 然 后 决定 是 否 继续 。 为 了 做 到 这 一 点 ， 
尝试 了 一 种 标签 页 界面 的 变 体 。 
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Campaign setup 


Campaign name: 








| Tip: 
Start date: End date: 
口 03/03/10 口 03/03/11 Lorem ipsum ... 


Geographical area: 
[UntedStaes O [5 


Language for the ads: 





United States Y 





图 14-2 


在 图 14-3 这 个 版 本 中 ， 用 户 能 更 容易 地 看 到 共有 4 个 步 又， 也 更 容易 明 
了 他 们 即将 需要 什么 类 型 的 信息 。 


Campaign setup 


|1. Create a campaign | 2. Create an advertisement 3. Set relevant keywords |4. Set spending limits 


Campaign name: 

















Start date: End date: 
[] os/310 [7] 03/03/11 


Geographical area: 
[United States [s 











Language for the ads: 
United States Y 











图 14-3 


当前 步骤 是 绿色 的 ， 而 随后 的 步 又 不 可 点 击 ， 因 此 用 户 不 能 随意 和 弄 错 顺 
序 。 每 当 完成 一 个 步骤 后 ， 相 关 的 信息 将 会 被 记录 ， 在 下 一 步 中 系统 会 
根据 之 前 的 选择 进行 验证 。 
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设 定 范围 界限 

然而 ， 就 如 我 们 都 知道 的 网 页 上 的 垂直 空间 是 无 限 的。 页 面 有 多 长 并 不 
重要 ， 深 动 条 会 自动 适应 并 让 我 们 来 回 查 看 它 。 正 因为 这 一 点 ， 在 现 有 
的 设计 中 我 们 无 从 知道 每 个 步 又 到 底 有 多 长 。 


“告诉 大 家 ， 第 二 步 里 面包 含 了 26 个 多 项 选择 、1 个 字谜， 以 及 1 个 问答 
m” 

我 希望 能 为 用 户 建立 一 种 比 上 述 更 为 清晰 的 预期 。 我 希望 用 户 只 要 将 一 
眼 表 单 ， 就 能 推断 出 完成 整个 过 程 不 会 超过 5 分 钟 。 

为 了 实现 这 一 点 ， 我 需要 体现 出 Wizard 向 导 里 的 每 个 步骤 真 的 都 非常 
短 。 唯 一 能 做 到 的 方式 就 是 为 这 个 区 域 设 定 一 个 固定 的 高 度 。 


换 句 话说 ,我 需要 一 个 可 折 欠 面板 控件 来 取代 现 有 的 标签 页 。 如 图 14-4 
所 示 。 


Campaign setup 


Campaign name: 





Tip: 
Start date: End date: 
[] oso3/o [7] 03/0371 mpm 


Geographical area: 
United States 





Language for the ads: 
United States 4 








b 2. Create an advertisement 





b 3.Setrelevant keywords 











> 4. Set spending limits 








图 14-4 
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可 折 径 面板 控件 是 一 种 和 手风琴 非常 相似 的 界面 *。 它 包含 数 个 面板 ， 依 
据 用 户 的 输入 而 展开 和 收拢 。 图 14-4 中 ， 第 一 个 面板 是 展开 的 《可见 或 
FIF), WA T Create a campaign 表单 。 而 第 二 、 三 、 四 个 面板 则 都 是 收 
拢 的 〈 隐 藏 或 关闭 )， 其 中 的 每 一 个 面板 都 不 能 点 击 ， 以 此 来 预防 用 户 以 
错误 的 顺序 访问 某 个 过 程 。 

这 个 设计 中 ， 用 户 填 写 完 当前 表单 并 单 击 Next 后 ， 第 一 个 面板 将 滑动 收 
拢 ， 而 第 二 个 面板 随 之 滑动 展开 。 用 户 重 复 这 一 过 程 直 到 第 四 步 结束 。 
因为 整个 界面 的 高 度 是 固定 的 ， 用 户 很 容易 就 能 推断 出 在 这 个 过 程 中 每 
一 个 步骤 所 包含 的 表单 都 会 和 第 一 步 里 面 一 样 简短 ， 甚 至 更 短 。 这 样 他 
们 就 能 建立 一 种 期 望 认为 自己 能 在 很 短 时 间 内 就 可 以 完成 整个 表单 。 

和 之 前 的 设计 一 样 ， 过 程 中 每 个 步骤 都 有 一 个 Next 按钮 。 而 第 四 步 是 最 
后 一 步 ， 所 以 我 用 了 一 个 动 宾 词 组 来 代 蔡 Next， 见 网 14-5. 




















Campaign setup 
b 1. Create a campaign 


b 2. Create an advertisement 


Campaign daily budget (e.g. "3.007): 
5 








Max cost-per-click (e.g. 1.00"): 
$ 

















( Save campaign  ) 








图 14-5 





CD 可 折 秋 面板 控件 和 手风琴 的 英文 一 样 ， 都 是 Accordion. 





译 者 注 
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这 样 很 清楚 地 表明 用 户 正在 保存 所 有 的 信息 ， 他 的 活动 正在 被 创建 。 


最 后 一 步 ， 我 把 每 个 已 访问 过 的 面板 标题 改 成 了 链接 形式 ， 以 此 告诉 用 
户 可 以 返回 之 前 那些 面板 去 修改 已 经 输入 的 信息 。 当 然 ， 有 些 改动 可 能 
会 影响 到 后 面 的 面板 。 如 果 发 生 这 种 情况 ， 你 可 以 在 用 户 每 次 做 出 这 类 
改动 时 显示 一 条 消息 说 明 这 一 影响 ， 并 且 要 求 他 们 重新 进行 后 续 的 设置 。 
通过 显示 步骤 数 并 且 帮 助 用 户 推断 每 个 步骤 的 长 度 ， 我 们 为 用 户 建立 了 
清晰 的 期 望 。 他 们 能 够 知道 自己 正在 做 什么 ， 还 能 预 佑 完成 整个 过 程 所 
需 的 努力 ， 同 时 还 可 以 获得 一 个 愉快 的 ， 或 者 至 少 是 相对 轻松 的 瞬间 。 
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如 果 不 讨论 长 度 或 复杂 度 ， 表 单 设 计 的 最 关键 问题 之 一 就 
在 填写 过 程 中 犯 各 种 错误 。 








犯错 误 时 我 们 会 责怪 自己 ， 用 户 也 一 样 。 绝 大 部 分 表单 都 只 





是 用 户 可 能 会 


有 很 简短 的 标 


签 ， 同 时 也 缺少 提示 性 的 默认 值 ， 而 最 普遍 的 黄 过 于 没有 任何 预防 及 侦 测 
错误 的 方法 。 即 使 我 们 绝 大 部 分 人 可 能 都 认为 自己 相当 聪明 ， 可 一 旦 错误 
发 生 ， 我 们 却 总 认为 是 自己 的 过 失 ， 而 不 是 指责 该 程序 设计 得 有 问题 。 








自我 指责 不 可 能 创造 美好 瞬间 。 它 和 我 们 所 希望 的 用 户 使 
一 起 念 : 有 成 效 、 聪 蔗 而 且 备 受 导 重 ) 完全 相反 。 

因此 ， 要 想 改 善 产 品 ， 我 们 最 需要 做 的 事情 就 是 无 论 何 时 
误 的 出 现 。 而 正 因为 用 户 在 表单 里 到 处 都 有 可 能 犯错 误 ， 
好 的 开始 。 


民 多 表单 使 用 了 一 种 简单 又 明显 的 方式 提示 错误 : JavaScri 
框 。 见 图 15-1, "EH E] GoDaddy.com" 的 验证 程序 。 


























Aw 
































现在 已 变 成 了 互联 网 上 报告 错误 的 标准 方式 。 
日 现在 的 问题 是 人 们 已 经 习惯 了 这 种 告警 方式 。 他 们 不 再 




















用 感受 (和 我 


都 尽力 杜绝 错 


它 倒是 一 个 很 








pt 的 警告 对 话 


日 于 警告 对 话 框 非常 容易 创建 ， 你 只 需要 一 行 JavaScript 代码 ， 因 此 它们 





阅读 上 面 的 文 




















字 ， 而 只 是 被 动 地 扫 一 眼 ， 然 后 便 单 击 OK 按钮 。 如 果 用 户 根本 不 去 读 ， 




















或 者 说 他 们 单 击 OK 只 是 出 于 习惯 而 不 是 因为 理解 ， 那 么 
对 话 框 几乎 一 点 用 处 都 没有 。 

















(D GoDaddy 是 世界 第 一 大 域名 注册 商 ， 进 军 主 机 领域 后 发 展 迅 





























GoDaddy 上 的 网 站 数量 已 居 志 界 首位 。GoDaddy 同时 提供 Linux 3 








显示 这 种 警告 


速 。 目 前 放置 在 
EHL, Windows X: 



































WL. VPS 以 及 独立 主机 全 线 主机 产品 ， 各 种 需求 的 客户 在 这 里 都 可 以 找到 适合 自己 








的 产品 。 网 址 为 http://www.godaddy.com。 一 一 译 者 注 
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Registration Agreement" 
by checking the 'Domain Registration Agreement" 
checkbox on this page. 


> https:/ /cart.godaddy.com 
的 To register a domain you must accept the 'Domain 





15-1 

同时 ， 警 告 对 话 框 是 一 种 应 用 程序 模式 ( application-modal ) 2， 也 就 是 说 
在 警告 被 处 理 之 前 ， 浏 览 器 功能 将 被 强制 失效 。 人 然而 实际 上 ， 真 正 严重 到 
需要 用 户 必须 马上 处 理 的 错误 并 不 多 ， 所 以 动不动 就 锁 住 他 们 的 浏览 器 其 
实 是 相当 粗鲁 的 行为 。 而 现在 却 是 几乎 每 一 个 错误 都 要 变 成 警告 对 话 框 来 
打 断 用 户 的 正常 工作 。 没 有 别 的 原因 ， 只 是 因为 警告 对 话 框 很 容易 创建 。 

了 控制 住 你 自己 ， 记 住 下 面 这 句 话 : 

警告 对 话 框 用 得 越 多 ， 就 越 没 有 效果 。 

它们 应 该 用 于 应 付 紧 急事 件 ， 例 如 当 网 站 着 火 时 用 来 敲 碎 放 灭火 器 的 玻璃 。 
对 于 错误 信息 以 及 校 验 来 说 ， 它 们 几乎 完全 可 以 用 不 那么 粗暴 的 方式 来 
展现 ， 从 而 创建 一 个 更 为 友好 的 瞬间 。 

在 为 UpDown-Repeat 网 站 的 校 验 表单 进行 设计 时 ，Kris Hadlock”( 来 
自 Miskeeto “的 一 位 顾问 ) 和 我 致力 于 改善 这 一 局 面 。 我 们 设计 出 了 一 套 














过 




















CD 应 用 程序 模式 对 话 框 将 阻止 用 户 和 该 应 用 程序 发 生 其 他 任何 交互 ， 但 用 户 可 以 切换 
到 其 他 应 用 程序 。 读 者 可 以 通过 以 下 链接 查阅 Apple 的 人 机 界面 指南 (Apple Hu- 
man Interface Guidelines) 中 关于 application-modal 的 详细 说 明 http://developer.apple. 
com/documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGWindows/ 
chapter 18, section 7.html. 译 者 注 

(2) UpDown-Repeat 是 一 个 设计 界 的 工作 坊 (Workshop) 网 站 ， 用 户 可 以 在 线 发 起 或 参 
加 各 类 型 工作 坊 。 但 该 网 站 现 已 不 再 经 营 。 译 者 注 

(3) Kris Hadlock 是 一 名 Web 设计 师 和 程序 员 ， 同 时 也 是 一 位 作者 。 他 成 立 了 Studio 
Sedition〈 暴 动工 作 室 )， 网 址 为 http://www.studiosedition.com/。 译 者 注 

(4) Miskeeto 是 一 个 世界 级 的 网 页 设计 、 开 发 及 战略 研究 的 团队 ， 领 导 者 是 Robert 
Hoekman, Jr.〈 其 实 也 就 是 本 书 作 者 )。 他 们 聘请 的 顾问 都 是 来 自 世 界 各 地 的 专家 及 
有 杰出 贡献 者 。 该 团队 的 网 站 为 http:/www.miskeeto.com/。 一 一 译 者 注 
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解决 方案 ， 在 事先 便 尽 可 能 多 地 减少 错误 ， 如 果 仍 有 漏网 之 鱼 则 礼貌 地 
通报 给 用 户 ， 竭 尽 所 能 让 该 表单 不 再 给 用 户 造 成 麻烦 。 
015.1 要 纠 错 ， 也 要 赞扬 


UpDown-Repeat 网 站 中 ， 用 户 如 果 想 出 席 某 个 研讨 会 或 工作 坊 ， 需 要 和 输 
入 本 人 的 映 份 及 账户 信息 。 而 在 这 个 填写 过 程 中 几乎 每 一 个 表单 域 都 有 
可 能 引发 错误 。 


可 能 用 户 输入 的 电子 邮件 地 址 无 效 ， 或 者 信用 卡号 里 漏 掉 了 一 个 数字 ， 
或 者 遗漏 了 某 个 必 填 项 ， 或 者 其 他 诸如 此 类 的 错误 。 


那么 我 们 怎样 才能 制止 这 种 令 人 抓 狂 的 局 面 呢 ? 
可 以 学 习 已 有 的 不 错 实例 ， 比 如 Eventful 网 站 的 注册 表单 ”。 


如 图 15-2 所 示 ， 这 个 表单 不 仅 能 在 错误 发 生 的 第 一 时 间 就 做 出 响应 ， 而 
且 立 即 在 该 处 使 用 了 极为 醒目 的 红色 背景 ， 并 加 以 表意 清晰 的 提示 信息 。 




















“Register 


Something's wrong! 
Please see the highlighted field below. 


Email s 
robert@miskeeto.com 


Your email is for verification purposes. You will receive an 
email with a link for you to confirm your email address. 


Username e 


Atleast 2 characters 


| Username must: start with a letter; end with a letter or 
| number; not be only numbers; and use only letters, 
| numbers, dashes, or underscores. 


Password 


Atleast 6 characters 





图 15-2 


(D A 453 XC RA Je VA PE X REDE E e HPLC, £e CPGE. RA http:/eventful.com/ 
join。 一 一 译 者 注 
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Eventful 网 站 并 不 只 是 把 “User names must be at least 2 characters”( 用 户 
名 至 少 需要 2 个 字符 ) 殷 在 那里 就 完事 了 了。 错误 发 生 时 会 随即 显示 出 更 
多 的 信息 。 具 言 之 : 


用 户 名 必须 : 以 字母 开头 ; 以 字母 或 数字 结尾 ; 不 能 只 包含 数 
F; 只 能 使 用 字母 、 数 字 、 横 线 或 下 划 线 。 


已 经 说 明了 必须 以 字母 开头， 其 实 无 需 强调 用 户 名 不 能 只 包含 数字 。 尽 
管 稍 嫌 哆 味 ， 但 这 些 信息 确实 有 助 于 解释 用 户 在 该 处 的 可 选 范 围 ， 并 且 
说 明了 应 当 如 何 改正 错误 。 


我 不 喜欢 Eventful 表单 的 地 方 ， 同 时 也 是 绝 大 多 数 表单 都 存在 的 问题 ， 
在 于 它 仅仅 只 在 出 错时 才 提 醒 你 ， 而 做 对 了 的 时 候 却 什么 也 不 说 。 哪 怕 
正确 地 填写 完整 个 表单 ， 没 有 看 到 一 个 出 错 提 示 ， 你 仍然 会 怀疑 到 底 是 
不 是 真 的 完全 没有 问题 。 你 仍然 会 民情 不 安 地 猜测 是 否 在 提交 表单 时 将 
出 现 一 个 错误 列表 。 


所 以 除了 检测 到 错误 时 立即 显示 友好 的 提示 信息 之 外 ， 告 诉 用 户 “ 一 切 
都 没有 问题 ”同样 也 很 重要 。 

要 把 这 些 想法 应 用 到 UpDownRepeat 网 站 的 校 验 表单 中 去 ， 我 们 从 默认 
状态 的 表单 开始 ， 如 图 15-3 所 示 。 






































4 


Attendee first name: * 


Attendee last name: * 


Attendee email (e.g. megmydomain.com): * 





15-3 
我 们 希望 只 要 用 户 正确 地 完成 一 个 步 又 ， 就 在 第 一 时 间 告 诉 他 们 。 因 此 
RRI SJE” T OurProperty.co.uk“ 的 点 子 : 用 户 正确 地 填写 完 某 项 后 ， 
在 该 项 旁边 显示 一 个 绿色 的 色 号 以 表示 “通过 ”。 如 图 15-4 所 示 。 





























CD OurProperty 是 一 个 英国 房产 交易 网 站 。 该 网 站 注册 页 面 为 https://passport.fubra.com/ 
_ourproperty/signup.html。 一 一 译 者 注 
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Attendee first name: * 


Robert v 


Attendee last name: * 


Attendee email (e.g. megmydomain.com): * 





图 15-4 


而 下 一 步 ， 毫 无 疑问 ， 就 是 及 时 检测 错误 ， 并 且 友 好 地 进行 相关 提示 ， 
以 便 用 户 改 正 。 
2m 3 我 们 在 每 个 输入 域 的 下 方 都 创建 了 一 一 个 红色 的 文本 信 


息 ， 把 输入 域 边框 也 设置 为 红色 。 这 样 能 更 加 增强 输入 域 和 提示 信息 之 
间 的 联系 。 如 图 15-5 所 示 。 


Attendee first name: * 


Robert v 


Attendee last name: * 


L | 


Please enter your last name. 


Attendee email (e.g. megmydomain.com): * 





图 15-5 


而 此 处 的 关键 在 于 我 们 应 当 在 用 户 输入 之 后 再 显示 错误 提示 。 这 是 从 
Remember the Milk 网 站 ?学 到 的 教训 。 在 该 网 站 中 ， 输 入 域 刚 获得 焦点 
就 会 出 现 错误 提示 2 。 





CD Remember the Milk 是 个 人 任务 管理 网 站 ， 能 能 入 到 Google Calendar. Gmail. 
Twitter, BlackBerry 和 iPhone 等 服务 中 。 网 址 为 http://www.rememberthemilk.com/。 

译 者 注 

© 在 该 网 站 的 注册 过 程 中 ， 每 当 用 户 试图 在 某 个 输入 域 中 输入 信息 时 就 会 出 现 一 个 红 
色 的 错误 图 标 ， 并 给 出 相应 的 输入 限制 。 具 体 页 面 见 http://www.rememberthemilk. 
com/ signup/。 一 一 译 者 注 
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在 用 户 还 没有 机 会 输入 有 效 信息 之 前 就 责备 他 们 把 事情 搞 硕 了 ， 这 是 相 
当 粗 鲁 的 。 我 们 希望 避免 这 一 点 。 因 此 只 在 输入 域 失去 焦点 时 ， 我 们 才 
检测 是 否 显示 错误 提示 。 


可 能 现在 你 的 脑海 中 会 跳出 一 个 问题 。 
用 户 忽 略 某 些 必 填 项 ， 直 接 跳 到 表单 未 尾 试图 完成 填写 过 程 ， 又 会 
, 











在 这 种 情况 下 ， 某 些 输 入 域 根本 不 会 获得 焦点 ， 因 此 提示 信息 也 就 不 可 
能 被 触发 。 我 们 考虑 到 了 这 一 点 。 

通常 来 说 ， 人 们 会 按 顺 序 填写 表单 。 所 以 我 们 有 把 握 认 为 这 个 问题 几乎 不 
太 可 能 发 生 。 但 为 了 保证 在 这 种 情况 下 用 户 仍然 能 纠正 问题 ， 我 们 建立 了 
一 个 后 备 计划 : 在 表单 页 面 的 项 部 创建 了 一 个 奶油 色 背 景 的 提示 区 域 。 
如 果 用 户 跳 过 了 部 分 表单 并 尝试 提交 ， 他 将 会 看 到 如 图 15-6 所 示 的 提示 
信息 ， 同 时 在 页 面 中 列举 了 发 生 的 错误 。 





Unfortunately, there was an error with your address. Please double-check this information. 


The Art and Science of Web Forms 
* = required field 
Contact Information 


You will receive a receipt along with the directions, time and additional details about the event once 


you complete your order, Please complete the required fields below 





图 15-6 


假设 用 户 看 到 了 红色 的 错误 提示 并 且 修 改 了 自己 的 输入 结果 ， 那 么 错误 
将 会 被 绿色 的 色 号 代替 。 如 图 15-7 所 示 。 





Attendee first name: * 


Robert v 


Attendee last name: * 


Hoekman, Jr. v 


Attendee email (e.g. megmmydomain.com): * 


robert&miskeeto.com v 





图 15-7 
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这 个 表单 也 许 还 没有 百分之百 的 做 到 错误 核验 ， 事 实 上 谁 也 无 法 保证 这 
一 点 ， 但 是 它 为 用 户 完 成 表单 提供 了 坚实 有 效 的 反馈 ， 这 一 点 干 得 很 不 
错 。 


实时 更 新 信息 


最 后 ， 我 们 希望 在 该 操作 中 能 清楚 并 正确 地 显示 与 会 的 费用 。 为 了 做 到 
这 一 点 ， 我 们 使 用 了 JavaScript 脚本 ， 根 据 与 会 者 和 与 会 学 生 的 人 数 及 时 
更 新 总 费用 。 如 果 有 人 享有 折扣 ， 就 改变 总 金额 。 


如 图 15-8 所 示 ， 在 缺 省 情况 下 用 户 将 会 看 到 研讨 会 的 标准 费用 〈$149 )。 











Booking Information 


Number of attendees 


1 


How many of these attendees are students? 


(Lowers price to $119. Make sure to bring each student's ID. They will be checked at the door.) 


Promo code, if applicable 


Credit Information 


Your total price of admission is: $149 





图 15-8 


如 果 用 户 把 与 会 者 人 数 改 成 3 个 ， 总 金额 会 自动 修改 ($447)。 如 图 15-9 
所 示 。 


而 如 果 与 会 者 中 有 两 名 是 学 生 的 话 ， 那 么 与 会 费用 从 $149 变 成 了 $119， 
于 是 总 金额 会 再 度 调 整 〈$387)。 见 图 15-10. 
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Booking Information 


Number of attendees: 

B | 

How many of these attendees are students? 

(Lowers price to $119, Make sure to bring each student's ID. They will be checked at the door.) 


| | 
Promo code, if applicable: 


Credit Information 


Your total price of admission is: $447 





图 15-9 


Booking Information 


Number of attendees: 


3 


How many of these attendees are students? 
(Lowers price to $119. Make sure to bring each student's ID. They will be checked at the door.) 


2 
Promo code, if applicable: 


Credit Information 


Your total price of admission is: $387 





图 15-10 
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在 色 号 图 标 、 错 误 提 示 和 即时 更 新 信息 的 协作 下 ， 这 个 表单 预防 并 侦 测 
了 可 能 在 表单 中 出 现 的 几乎 任何 错误 。 以 上 案例 中 ， 我 们 要 达到 两 个 目 
标 。 


第 一 是 用 户 的 目标 一 一 没有 太 多 麻烦 地 完成 表单 。 第 二 是 重要 的 业务 日 
标 一 一 让 人 们 为 研讨 会 付费 。 


在 完成 某 项 任务 的 过 程 中 ， 那 些 用 户 目标 和 业务 目标 最 好 以 愉快 并 且 激 
发 愿景 的 方式 交互 。 用 户 所 希望 完成 的 ， 同 时 与 业务 考虑 相 吻 合 ， 这 才 
是 最 理想 的 任务 。 上 述 的 校 验 表单 过 程 就 是 其 中 之 一 。 用 户 最 多 只 愿 填 
写 一 个 表单 ， 而 他 们 希望 在 这 一 次 过 程 中 就 能 完成 购买 。 从 业务 角度 出 
发 ， 我 们 也 希望 用 户 达 到 同样 的 目的 ， 因 为 这 能 给 我 们 带 来 利润 。 

为 了 满足 我 们 的 需求 ， 先 得 保证 满足 用 户 的 需求 。 吵 一 一 如 果 有 人 和 想 给 
我 们 钱 ， 那 么 至 少 我 们 应 该 帮助 他 来 给 ， 不 是 吗 ? 


让 我 们 面 对 它 。 填 写 校 验 表单 并 不 像 小 镇 一 夜 那么 浪漫 。 尽 我 们 所 能 3 
让 这 一 过 程 更 加 流畅 ， 让 用 户 在 输入 账户 信息 的 瞬间 尽 可 能 得 愉快 。 


也 许 不 能 让 这 一 过 程 很 有 意思 ， 但 至 少 可 以 让 它 别 那么 糟糕 。 




















第 1635 
简化 长 表单 





我 兽 与 某 家 大 型 保险 公司 合作 ， 为 其 人 寿 保 险 申 请 流程 中 所 涉及 的 规章 
制度 及 合法 性 做 了 大 量 的 研究 工作 。 然 后 他 们 设计 出 了 一 套 迄 今 以 来 我 
所 见 过 的 最 具 “ 欺 骗 性 ”的 表单 。 


这 个 表单 在 一 开始 只 有 3 道 简单 的 是 非 题 ， 例 如 “您 、 您 的 配偶 及 家 属 是 
否 曾 通 过 其 他 公司 购买 过 Acme 的 专项 医疗 、 牙 科 、 眼 科 等 保险 项 目 ?” 


如 果 每 个 问题 都 选择 “不 ” 那么 你 很 安全 。 但 如 果 其 中 有 任何 一 道 你 选 
择 了 “是 ”， 表 单 就 会 增长 。 新 的 表单 域 自动 地 人 藤 入 到 页 面 中 ， 让 表单 变 
得 更 长 ， 同 时 也 需要 你 付出 更 多 的 努力 才能 完成 。 


比方 说 ， 如 果 你 选择 通过 其 他 某 个 公司 买 了 保险 ， 就 会 出 现 关 于 医疗 、 
牙科 和 眼科 保险 项 目的 复 选 框 。 如 果 你 选中 了 医疗 选项 ， 表 单 将 会 再 次 
增长 ， 并 且 要 求 你 填写 该 公司 的 名 称 、 地 址 和 电话 号 码 。 它 还 会 询问 你 
的 保单 号 、 生 效 日 期 和 终止 日 期 。 如 果 你 选择 了 牙科 选项 ， 则 又 会 出 现 
新 的 表单 域 。 如 果 你 3 项 都 选 了 ， 那 么 你 将 会 有 一 整个 下 午 的 快乐 时 间 ， 
试 着 回答 一 些 可 能 自己 都 不 知道 答案 的 问题 。 


而 这 一 切 都 是 因为 你 在 第 一 道 是 非 题 中 选择 了 “是 ”。 m. ADAMS 
两 道 题 ， 它 们 都 会 出 现 类 似 的 结果 。 也 就 是 说 ， 这 个 表单 的 总 长 度 大 概 
是 我 们 现在 所 看 到 的 3 倍 。 


一 开始 只 有 3 个 简单 问题 的 表单 瞬间 变 成 了 一 个 醒 着 的 民 梦 。 表 单 似乎 
无 休 无 止 : 你 的 每 一 次 点 击 都 会 让 表单 增长 ， 就 好 像 影 片 The Blob "里 面 
那个 搞笑 的 果冻 怪物 一 样 。 你 可 能 会 耗费 一 整个 下 午 ， 而 只 是 在 尽力 完 
成 这 一 个 页 面 。 



















































































































































































CD The Blob 变形 怪 体 ) 是 一 部 科幻 / 邵 怖 /喜剧 片 ，Allied Artists 影 业 公司 1958 年 出 
品 。 影 片 中 一 个 如 同 巨 大 果冻 的 神秘 外 星 怪物 随 着 陨 星 落 到 地 球 上 。 译 者 注 
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我 的 客户 出 发 点 是 好 的 ， 他 们 希望 用 户 能 够 在 一 个 界面 中 填写 完成 ， 认 
为 这 样 对 用 户 会 更 简单 。 毕 竞 ， 等 待 载 和 一 个 新 页 面 会 非常 让 人 讨厌 ， 
而 且 如 果 出 现 了 错误 ， 回 退 修正 也 会 冒 丢 失 会 话 的 风险 。 


但 是 在 用 户 努 力 完成 这 个 表单 的 时 候 也 失去 了 其 他 一 些 东西 。 换 名 话说， 
失去 了 还 有 可 能 完成 它 的 所 有 希望。 每 次 表单 增长 一 些 ， 你 的 心 就 会 下 
沉 一 些 。 泪 丧 感 很 快 就 会 出 现 ， 随 之 而 来 的 则 是 焦虑 。 


而 具有 讽刺 意味 的 是 ， 这 个 表单 完整 打印 出 来 其 实 也 就 只 有 两 页 纸 那么 
长 。 只 是 因为 网 页 的 这 种 设计 才 会 使 它 让 人 觉得 无 法 完成 。 
我 的 客户 希望 知道 如 何 能 够 改进 它 。 我 要 了 一 杯 双 份 摩卡 咖啡 、 一 大 堆 
马克 笔 、 一 块 巨 大 的 和 白板， 然后 还 有 一 根 粗大 的 牛皮 鞭 。 


好 吧 ， 我 是 有 点 夸张 ， 但 也 只 有 一 点 而 已 。 
C16.1 清晰 的 预期 


通过 减少 完成 表单 所 需要 的 页 面 数 (并 且 应 用 了 一 种 我 不 太 认 可 的 渐进 
展现 方式 )， 我 的 客户 成 功 地 把 所 有 东西 归结 为 一 个 界面 。 但 是 与 此 同 
时 ， 他 们 也 使 用 户 无 法 对 整个 过 程 建立 任何 一 种 期 望 。 页 面 中 没有 任何 
东西 能 帮助 用 户 预 知 将 被 这 个 罗网 困 住 的 时 间 。 这 并 没有 让 表单 显得 更 
加 简单， 反而 让 人 感到 更 加 复杂 。 

我 们 的 目标 不 应 该 是 把 所 有 东西 都 放 在 一 个 界面 里 。 正 确 的 目标 应 该 是 
使 用 户 相 信和 表单 并 没有 实际 的 那么 复杂 。 不 是 欺骗 或 轧 弄 他 们 ， 而 是 创 
建 一 种 简单 的 印象 ， 使 得 表单 给 人 感觉 不 那么 复杂 ， 从 而 在 填写 时 不 那 
么 痛 蔡 。 

最 后 ， 我 选用 了 一 种 设计 ， 在 整个 过 程 的 每 一 步 都 建立 起 清晰 的 预期 使 
之 更 加 友好 ， 并 且 让 整个 表单 感觉 不 像 实际 那么 麻烦 。 

首先 ， 我 把 表单 分 解 成 好 几 个 页 面 ， 并 且 添 加 了 一 个 步骤 进度 条 ， 把 整 
个 表单 变 成 了 一 个 Wizard 疝 导 。 这 么 做 的 目的 是 对 每 个 步 又 中 用 户 需 要 
填写 的 内 容 有 一 个 清晰 的 指示 ， 并 且 让 用 户 随 时 了 解 还 剩 下 多 少 个 步骤 。 
其 次 ， 我 去 掉 了 多 余 的 表单 域 ， 以 避免 用 户 在 多 处 重复 输入 相同 的 信息 。 


然而 ， 真 正 的 工作 其 实 是 考虑 如 何在 第 一 页 就 建立 清晰 的 预期 。 毕 竟 ， 
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如 果 得 不 到 一 开始 几 个 问题 的 答案 ， 我 们 也 没 办 法 告诉 用 户 他 们 即将 进 
入 的 是 什么 。 

我 以 该 表单 原始 版 本 中 同样 的 3 个 问题 开始 。 我 的 想法 是 第 二 页 才 是 
Wizard 的 第 一 步 ， 如 图 16-1 所 示 。 





Do you, your spouse, or your dependents have any Group Medical, 
Dental, or Vision coverage through an Employer other than your 
coverage with Acme Insurance? 


Q ves 
® No 


Do you, your spouse, or your dependents, have medical coverage 
with Medicare? 


© ves 
(9 No 


Do you, your spouse, or your dependents, have medical coverage 
with Medicaid? 


© Yes 
(9 No 


ETE 





16-1 


很 快 我 意识 到 这 里 的 信息 还 不 够 以 确定 Wizard 的 样子 。 为 了 动态 地 创建 
Wizard 向 导 ， 我 不 仅 需 要 知道 用 户 是 否 从 其 他 公司 购买 过 保险 ， 还 需要 
知道 他 是 否 购买 了 医疗 、 牙 科 或 眼科 的 保险 项 目 。 因 此 我 添加 了 一 个 复 
选 框 来 获得 这 一 信息 ， 见 图 16-2。 


为 了 让 事情 更 简单 点 ， 我 决定 如 果 用 户 选 中 了 这 3 个 复 选 框 中 的 任 
何 一 个 ， 那 个 Yes 单 选 按钮 也 会 自动 选中 。 这 样 使 得 表单 变 成 了 一 种 
“Conditional Form”。 这 种 表单 中 ， 用 户 对 某 个 选项 的 选择 可 能 会 使 其 他 
元 素 被 激活 或 者 失效 。 
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Do you, your spouse, or your dependents have any Group Medical, 
Dental, or Vision coverage through an Employer other than your 
coverage with Acme Insurance? 


(9 Yes 
国 Medical 国 Dental 图 Vision 
(9 No 


Do you, your spouse, or your dependents, have medical coverage 
with Medicare? 


(9 Yes 
(9 No 


Do you, your spouse, or your dependents, have medical coverage 
with Medicaid? 


(9 Yes 
(9 No 


(Getstated | 





图 16-2 


不 过 在 做 这 个 决定 的 过 程 中 ， 我 发 现 根 本 就 没 必 要 显示 单 选 按钮 。 如 果 
用 户 购买 过 这 里 面 任何 一 种 保险 ， 那 么 答案 自然 是 Yes。 如 果 他 没有 这 些 
保险 ， 答 案 则 肯定 是 No。 因 此 我 直接 把 第 一 题 的 单 选 按钮 全 部 去 掉 ， 如 
图 16-3 所 示 。 


延续 这 种 思路 ， 我 意识 到 没有 理由 要 用 户 去 为 任何 问题 选择 No。 后 续 的 
Wizard 向 导 过 程 只 有 在 答案 为 Yes 时 才 会 增加 内 容 。 因 此 我 决定 摆脱 掉 
所 有 剩 下 的 单 选 按钮 ， 并 且 把 问题 变 成 了 复 选 框 选 项 ， 如 图 16-4 所 示 。 
这 样 一 来 ， 那 些 没 有 从 其 他 公司 购买 过 保险 的 用 户 只 需要 单 击 Get Started 
《开始 ) 按钮 ， 不 需要 其 他 任何 动作 。 在 原始 的 设计 中 ， 用 户 则 必须 要 为 
每 一 道 问题 选择 No 的 单 选 按钮 。 因 此 这 个 新 设计 需要 花费 的 努力 更 少 。 
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Do you, your spouse, or your dependents have any Group Medical, 
Dental, or Vision coverage through an Employer other than your 
coverage with Acme Insurance? 


[D Medical 国 Dental 国 Vision 


Do you, your spouse, or your dependents, have medical coverage 
with Medicare? 


© ves 
O No 


Do you, your spouse, or your dependents, have medical coverage 
with Medicaid? 


© Yes 
(Q No 


| Getsiariod | 





图 16-3 


Other insurance 


l, my spouse, or my dependents has/have Group Medical, Dental, 
or Vision coverage through an Employer other than your coverage 
with Acme Insurance. (Choose all that apply.) 


[D Medical 国 Dental 国 | Vision 


Medicare 


加 I, my spouse, or my dependents has/have medical coverage 
with Medicare. 


Medicaid 


[-] I, my spouse, or my dependents has/have medical coverage 
with Medicaid. 


(eetsaned 一 | 





16-4 


最 后 一 个 小 花招 ， 是 第 一 时 间 就 告诉 用 户 在 完成 表单 的 过 程 中 将 会 需要 
哪些 信息 。 这 样 他 们 就 能 在 开始 填写 之 前 就 事先 准备 好 ， 而 不 会 在 填写 
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过 程 中 感觉 受 了 欺骗 。 


为 了 做 到 这 一 成 ， 我 在 表单 顶部 深 加 了 一 一 些 说 明 性 文字 ， 把 每 一 条 必需 
的 信息 列 成 项 目 列表 的 形式 "， 这 样 更 能 鼓励 用 户 快速 阅读 。 见 图 16-5。 





If you have insurance through another provider, you may need to 
have the following information handy to complete this application: 


* Statement of coverage from your current insurance provider 
* Effective dates and/or end dates for each type of coverage 
* Policy numbers for each policy 


Other insurance 


l, my spouse, or my dependents has/have Group Medical, Dental, 
or Vision coverage through an Employer other than your coverage 
with Acme Insurance. (Choose all that apply.) 


[.] Medical 国 Dental [ Vision 


Medicare 


B I, my spouse, or my dependents has/have medical coverage 
with Medicare. 


Medicaid 





I, my spouse, or my dependents has/have medical coverage 
with Medicaid. 





. Geisiated | 





图 16-5 


乍 看 上 去 ， 新 的 设计 似乎 还 没有 最 初 的 版 本 那样 干净 简单 ， 但 是 现在 完 
成 它 所 需要 的 精力 更 少 。 同 时 一 开始 我 们 就 为 它 建立 了 清晰 的 预期 ， 而 
被 划分 为 多 个 步 又 也 使 之 不 再 难以 把 握 。 


并 不 是 所 有 的 交互 都 能 够 简化 。 但 我 们 却 可 以 让 它们 看 上 去 更 容易 。 建 
立 清 晰 的 预期 ， 并 且 把 复杂 的 过 程 分 解 成 能 一 口 口 干 掉 的 小 块 ， 即 使 最 
复杂 的 交互 也 便于 控制 了 。 














4 





该 处 的 中 文 翻译 如 下 。 
“如 果 您 从 其 他 公司 购买 过 保险 ， 完 成 此 表单 可 能 手边 需要 有 如 下 信息 : 
o 从 其 他 担保 方 购买 的 保险 项 目 详细 信息 
e 各 保险 项 目的 生效 日 期 和 终止 日 期 
e 各 保险 项 目的 保单 号 ”一 一 译 者 注 
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我 和 Kris Hadlock "V 33 Inc2 的 名 义 合作 开发 Dashboard HQ“ 时 ， 我 们 
真 的 很 希望 把 它 做 成 一 款 伟 大 的 、 面 向 全 世界 的 在 线 书签 管理 工具 。 现 
在 我 仍然 相信 这 是 一 款 伟 大 的 工具 。 但 当 它 发 布 时 ， 网 络 社区 正 风 行 一 
时 ， 而 我 们 这 个 小 程序 并 没有 什么 社区 特性 ， 因 此 它 没 有 跟 上 潮流 。 最 
后 我 们 还 是 取消 了 扩展 Dashboard HQ 的 计划 。 


但 不 管 怎么 说 ， 这 款 应 用 依然 存在 着 。 到 今天 我 仍 把 它 作 为 自己 浏览 器 
的 主页 面 ， 而 且 它 工作 得 仍然 相当 棒 。 


它 的 诸多 好 处 之 一 就 是 登录 流程 非常 简单 方便 。 而 在 其 他 大 多 数 Web 应 
用 中 ， 通 常 让 人 头疼 的 是 : 你 需要 记 住 你 的 用 户 名 和 密码 。 


在 Web 应 用 中 登录 难 就 难 在 这 里 。 如 果 碰 巧 你 知道 自己 的 用 户 名 和 密 
码 ， 或 者 设置 浏览 需 为 你 记 住 它们 ， 那 么 这 个 过 程 非常 简单 。 但 如 果 发 
现 其 中 有 一 个 不 正确 ， 你 可 能 就 得 费 好 大 劲 来 找 回 你 需要 的 信息 ， 而 这 
个 过 程 可 不 令 人 愉快 。 


试图 重新 找 回 用 户 名 或 者 密码 时 ， 很 多 网 站 都 有 一 些 多 余 的 步骤 。 比 如 
说 ， 在 使 用 了 正确 的 用 户 名 尝试 登录 了 数 次 之 后 ， 最 后 你 意识 到 自己 真 
的 忘掉 了 密码 ， 于 是 单 击 了 Forgot Password? (忘记 密码 ? ) 链接 ， 
然后 被 带 到 一 个 新 页 面 ， 而 在 这 里 你 必须 再 次 输入 你 的 用 户 名 。 





























































































































D 这 位 设计 师 在 第 15 章 已 经 出 现 过 了 。 一 一 译 者 注 
(2) 33 Inc 是 一 个 从 事 Web 应 用 开发 的 二 人 团队 ， 其 成 员 也 就 是 本 书 作者 Robert Hoek- 
man, Jr. 和 Kris Hadlock。 网 站 地 址 为 http://www.33inc.com/。 译 者 注 
(3) Dashboard HQ 是 一 款 基 于 Web 的 软件 ， 由 33 Inc 开发 。 用 户 能 够 把 自己 单位 、 家 
庭 电脑 和 笔记 本 中 的 收藏 网 页 都 集中 到 一 个 单独 的 页 面 上 ， 这 样 从 任何 终端 都 能 通 
过 网 络 进行 访问 。 该 产品 也 能 让 用 户 通过 简单 的 操作 对 网 页 书签 进行 添加 或 编辑 。 
网 站 地 址 为 http:/www.dashboardhq.com/〔( 目 前 国内 无 法 登录 )。 译 者 注 
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因为 系统 需要 先知 道 你 的 用 户 和 名 ， 和 否则 它们 什么 都 帮 不 了 。 而 它们 又 无 
法 确定 你 先前 登录 时 输入 的 用 户 名 是 否 正 确 。 因 此 ， 你 必须 再 次 输入 一 
壳 。 一 旦 它们 知道 了 用 户 名 ， 通 常 就 会 通过 邮件 把 现 有 的 密码 发 送 给 你 ， 
或 者 给 你 另外 一 个 链接 去 创建 新 密码 。 


很 麻烦 ， 不 是 吗 ? 


在 试图 改进 这 个 古老 的 标准 方案 以 便 让 它 更 有 意思 时 ， 我 们 问 了 自己 一 
个 简单 的 问题 。 


如 果 系 统 已 经 知道 了 你 的 用 户 名 ， 又 会 怎样 ? 
Q171 再 一 次 改进 标准 


如 果 系 统 已 经 知道 了 你 的 用 户 名 ， 你 便 无 需 专门 跑 到 另 一 个 页 面 去 输入 
它 ， 然 后 告诉 系统 把 密码 发 给 你 。 因 为 系统 能 很 快 做 到 这 一 点 ， 而 不 需要 
你 付出 任何 额外 的 努力 。 也 正 因为 如 此 ， 这 个 Forgot Password ? 的 新 页 面 
也 不 是 很 必要 了 ， 并 且 登 录 页 面 只 需 一 个 链接 就 能 把 密码 直接 发 送 给 你 。 


17.1.1 网 络 用 户 名 与 用 户 姓 名 
为 了 实现 这 一 想法 ， 我 们 对 系统 进行 了 设计 使 得 用 户 名 成 为 登录 网 站 时 
使 用 的 URL 地 址 的 一 部 分 。 


这 样 一 来 ， 用 户 收 藏 的 不 是 首页 ， 而 是 他 自己 的 个 人 登录 页 。 如 果 他 的 
用 户 名 是 John， 那 么 他 直接 在 www.dashboardhq.com/john 的 页 面 登录 。 
如 果 在 他 登录 后 进入 这 个 页 面 ， 那 么 将 自动 转向 他 自己 的 Dashboard HQ 
首页 。 如 果 没 有 ， 他 只 需要 输入 密码 即 可 。 看 看 图 17-1 吧 。 


如 果 碰 巧 某 位 用 户 和 其 他 人 共用 一 台电 脑 ， 他 可 能 会 发 现 自己 正 上 隘 着 一 
个 不 属于 他 自己 的 登录 页 面 。 有 一 个 小 小 的 链接 用 于 应 付 这 种 情况 : I 
am not John〔 我 不 是 John)。 单 击 这 个 链接 时 ， 本 来 显示 的 用 户 名 将 会 转 
变 成 一 个 输入 域 ， 这 样 他 就 能 输入 自己 的 用 户 名 了 。 


这 里 的 想法 非常 简单 。 既 然 我 们 能 做 到 这 一 点 ， 为 什么 还 得 要 求 那 些 
“ 熟 客 ” 记 住 自己 的 用 户 名 呢 ? 

不 像 大 多 数 其 他 登录 页 面 那样 强迫 用 户 每 次 都 输入 用 户 名 ， 我 们 提供 了 
一 些 额外 的 东西 来 减弱 记 住 用 户 名 的 注音 。 
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Dashboard My 


Username: john lam not john 





Password: 


日 Remember me for two weeks 


Not registered? 








图 17-1 


而 正 因 为 已 经 知道 了 用 户 名 ， 因 此 某 位 用 户 单 击 Forget Password ? 的 
链接 时 ， 我 们 不 再 需要 把 他 送 到 男 一 个 界面 再 次 输入 自己 的 用 户 名 。 单 
击 这 个 链接 只 会 在 后 台 给 该 用 户 记 录 中 的 邮箱 地 址 发 送 一 封包 含 密码 的 
电子 邮件 ， 同 时 在 登录 页 面 显 示 一 条 简单 的 信息 告诉 用 户 密码 已 经 发 送 。 


17.1.2 ”更 上 一 层 楼 


TE IXDA (Interaction Design Association， 交 互 设计 协会 ) "网 站 活跃 的 讨 
论 组 名 单 中 ， 很 多 成 员 都 把 它 当 作 自 己 的 网 上 家 园 。 设 计 这 个 网 站 的 那 
帮 有 家 伙 在 简化 登录 流程 方面 迈 出 了 更 大 的 一 步 ”。 

实际 上 ， 这 个 网 站 甚至 都 不 需要 密码 。 

如 图 17-2 所 示 ， 你 所 要 做 的 只 是 输入 你 的 名 字 和 注册 时 所 用 的 电子 邮件 
地 址 。 如 果 你 记 不 住 在 注册 时 所 使 用 的 名 字 格 式 〈 只 有 名 字 、 名 和 姓 都 
有 、 或 者 其 他 什么 组 合 方式 ) 也 不 用 烦恼 。 网 站 把 你 的 电子 邮件 地 址 作 
为 第 一 辨识 规则 ， 同 时 适 配 你 在 数据 库存 档 中 名 字 的 任意 格式 。 























(D KDA 是 一 个 2003 年 成 立 的 非 伍 利 性 专业 协会 ， 目 前 约 有 1500 名 来 自 世 界 各 地 
的 协会 成 员 ， 致 力 于 满足 国际 交互 设计 业界 的 需求 。 网 站 地 址 为 http//www.ixda. 
org。 一 一 译 者 注 

Q 该 网 站 的 登录 页 面 见 http://www.ixda.org/profile.php。 一 一 译 者 注 
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Your Name 


Robert 


Subscription E-mail 


robert(ümiskeeto.com 


sign In What about passwords? 





图 17-2 


比如 说 ， 我 用 Robert Hoekman, Jr. 的 名 字 注 册 ， 如 果 我 在 Your Name. (你 
的 名 字 ) 一 栏 中 只 键入 Robert， 我 仍然 能 够 登录 。 而 如 果 我 键入 了 一 个 
我 没 使 用 过 的 名 字 ， 比 如 说 Joe， 就 会 得 到 一 条 错误 信息 ， 如 图 17-3 所 
ZRe 





This name and e-mail address do not match. Please use the 
name you're known by on the IxDA discussion list. 


Your Name 


Joe 


Subscription E-mail 
robert@rhjr.net 





Sign In What about passwords? 





图 17-3 


这 让 我 感到 在 没有 密码 的 情况 下 ， 自 己 的 账户 也 还 算 有 一 点 安全 性 。 但 
如 果 我 用 讨论 组 其 他 成 员 的 名 字 和 电子 邮件 地 址 登录 会 怎样 ? 我 认识 不 
少 成 员 ， 所 以 这 很 容易 办 到 。 我 能 轻易 登录 并 扮 成 那个 人 来 发 表 文 章 
吗 ? 


呢 ， 不 行 。 当 我 试 着 这 么 做 时 ， 系 统 显 示 了 一 条 信息 表示 我 在 之 前 从 未 
用 这 台电 脑 或 网 段 登录 过 ， 因 此 一 条 确认 请 求 已 经 被 发 送 到 了 我 输入 的 
那个 电子 邮件 地 址 。 


噢 哦 。 硕 望 我 测试 的 那个 电子 邮件 主人 不 要 认为 我 在 盗 取 他 的 账号 。 
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IxDA 的 解决 方案 并 不 一 定 适合 所 有 的 Web 应 用 : 它 仍然 不 如 密码 那么 
d^. 

同时 ， 输 入 网 络 用 户 名 是 一 个 非常 普遍 的 习性 ， 很 多 登录 的 用 户 会 在 
Your Name 一 栏 中 输入 自己 的 网 络 用 户 名 ， 而 实际 上 他 们 需要 键入 的 是 
自己 真正 的 名 字 。 违 背 了 用 户 的 通常 习惯 ， 将 会 使 本 已 简化 的 登录 流程 
te a en 尤其 是 用 户 并 不 知道 可 以 用 任 
意 格 式 来 输入 自己 的 名 字 。 这 会 使 得 他 们 犹豫 是 否 需要 把 名 字 输 入 得 完 
全 与 注册 时 一 模 一 样 。 
但 除了 这 些 之 外 ，IxDA 的 登录 过 程 是 一 次 伟大 的 尝试 。 设 计 师 们 积极 地 
挑战 标准 ， 不 断 探 索 如 何 改进 ， 而 不 是 犹 殉 不 决 。 

标准 绝 不 是 永恒 不 变 的 。 事 实 上 ， 绝 大 多 数 时 间 里 ， 在 某 些 人 刚 树 立 起 


标准 的 下 一 秒 钟 它们 就 改变 了 。 用 朵 新 的 眼光 看 待 那些 公认 为 陈腐 的 事 
物 ， 这 对 于 任何 产品 都 是 改进 其 用 户 体验 的 一 种 极 佳 方式 。 
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打 桌 球 时 有 各 种 方式 能 赢得 比赛 。 最 可 笔 的 方式 是 日 以 继 夜 地 磨 练 你 的 








击 球 动 作 、 纠 正 你 的 姿势 、 研 读 各 种 战术 ， 同 时 坚持 不 懈 地 学 习 应 对 各 


种 困境 。 这 是 那些 职业 选手 的 做 法 。 他 们 花费 数 年 时 间 反 复 训练 ， 和 那 
些 更 高 水 平 的 选手 比赛 ， 然 后 把 自己 推 向 更 高 峰 。 

而 如 果 不 那 么 稳扎稳打 却 同样 有 效 的 方式 则 是 学 习 基础 的 击 球 、 姿 势 和 
战术 ， 然 后 成 为 一 个 有 良好 控制 能 力 的 不 错 玩家 。 在 这 里 没有 那 种 职 ， 
桌球 选手 的 渴望 ， 只 是 一 种 稳固 的 实力 ， 然 而 它 却 能 击败 在 酒吧 挑战 你 























的 大 多 数 对 手 。 











最 不 可 靠 的 方法 则 是 绝 大 多 数 人 学 习 并 且 一 直 和 尝试 的 ， 也 就 是 poke-and- 
hope〈 打 了 再 说 ) 方式 。 这 意味 着 你 猛 地 朝 白 球 出 杆 ， 然 后 希望 有 什么 


球 能 碰巧 落 袋 。 





初学 者 基本 上 都 依靠 poke-and-hope。 更 高 级 的 桌球 玩家 偶尔 在 某 种 形势 


下 也 需要 这 种 方式 。 职 业 选 手 最少 ， 但 也 仍然 发 生 。 








和 大 多 数 桌球 初学 者 一 样 ， 大 多 数 电脑 用 户 也 没有 学 习 过 有 效 使 用 电脑 
的 基础 概念 和 技巧 。 这 很 自然 ， 因 为 他 们 有 很 多 比 熟 练 掌握 个 人 电脑 更 





























好 的 事情 要 去 做 ， 就 像 有 很 多 比 成 为 桌球 大 师 更 好 的 事情 要 去 做 一 样 。 


不 管 怎 样 ， 这 带 来 了 各 种 各 样 的 问题 。 人 们 在 网 站 上 右 击 ， 在 弹出 的 环 
境 全 单 中 寻找 与 任务 有 关 的 选项 。 他 们 在 浏览 需 的 地 址 栏 里 输入 电子 邮 
件 地 址 ， 然 后 奇怪 为 什么 他 们 的 电子 邮件 不 出 现 。 他 们 在 显示 顺 屏 幕 前 
举 着 一 张 纸 ， 然 后 奇怪 为 什么 不 能 扫描 。 而 更 经 常 的 是 ， 他 们 在 某 个 表 
单 底部 单 击 Submit《〈 提 交 ) 按钮 ， 然 后 祈祷 全 部 填写 正确 ， 这 样 就 不 会 















































看 到 一 堆 讨 大 的 出 错 信 息 让 他 们 感觉 自己 是 个 笨重 。 








换 句 话 说， 他 们 是 在 poke-and-hope。 
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如 果 你 是 一 个 靠 poke-and-hope 瞎 蒙 的 桌球 玩家 ， 也 许 就 能 够 体会 到 大 多 
数 人 使 用 在 线 软件 的 感觉 了 。 在 那里 没有 技巧 、 没 有 基础 、 没 有 深奥 的 
知识 ;在 那里 只 有 筷 切 的 希望 ， 无 论 出 杆 怎样 ， 都 希望 自己 能 更 靠近 一 
步 ， 从 而 窃取 1-2 场 胜利 。 


治疗 这 一 切 的 良 方 就 是 poka-yoke 机 制 ( 后 文 会 继续 详 述 )。 


在 Web 应 用 中 消除 错误 的 可 能 性 意味 着 poke-and-hope 用 户 现在 可 以 不 
再 像 低能 儿 那 样 使 用 产品 了 ， 即 使 他 们 几乎 完全 不 知道 网 络 到 底 是 如 何 
工作 的 ， 即 使 他 们 以 为 正 浏 览 器 的 “帮助 ”菜单 也 包含 产品 的 信息 ， 即 
使 他 们 在 网 站 的 搜索 栏 里 输入 URL 地 址 然后 期 待 新 网 站 会 自动 出 现 。 


改进 Web 应 用 所 能 做 的 最 重要 的 一 件 事 就 是 减少 出 错 的 可 能 性 。 现 在 如 
此 ， 以 后 也 一 样 。 不 会 出 错 的 用 户 感觉 自己 聪慧 、 备 受 尊 重 、 有 成 效 。 


聪 恶 、 备 受 尊重 、 有 成 效 的 用 户 是 整个 世界 上 最 好 的 用 户 ， 因 为 他 们 会 
告诉 其 他 人 使 用 你 们 产品 时 的 美妙 感觉 。 这 是 最 好 的 市 场 营销 。 


如 果 你 希望 人 们 也 能 这 样 谈 论 你 的 产品 ， 那 么 一 开始 最 好 的 办 法 就 是 把 
poke-and-hope 转变 成 poka-yoke。 


尝试 在 每 一 款 产品 的 设计 中 都 做 到 这 一 点 ， 因 此 当 我 坐 下 来 写 这 一 章 
时 ， 手 里 握 着 一 大 堆 例 子 。 我 选择 了 一 个 很 常见 的 问题 做 例子 : 带 字数 
限制 的 输入 域 。 


C18.1 到 达 限 制 


有 很 多 表单 域 都 需要 字数 限制 。 比 如 说 ， 在 某 个 创建 密码 的 输入 域 中 就 
只 能 输入 8~10 个 字符 。 


每 当 我 需要 创建 一 个 带 字 数 限制 的 表单 域 时 ， 几 乎 都 会 使 用 同样 的 方式 。 
因为 在 我 第 一 次 设计 表单 域 时 ， 便 游历 了 各 种 不 同 的 网 站 ， 研 究 我 所 能 
找到 的 每 一 个 类 似 情 况 ， 并 且 记 录 它 们 的 工作 方式 ， 最 后 得 出 我 认为 是 
最 好 的 设计 方案 。 而 当 自 己 的 方案 并 不 合适 时 ， 我 仍然 需要 去 寻找 其 他 
一 些 实例 。 


我 知道 你 正在 疑惑 为 什么 我 会 纠 强 于 这 样 一 个 简单 又 平凡 的 细 季 ， 对 
IE? 毕 竞 这 不 是 一 个 很 困难 的 界面 问题 ， 甚 至 它 都 不 值得 真正 去 考虑 。 
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但 在 你 下 结论 之 前 ， 想 想 以 前 曾 遇 到 过 的 那些 受 限制 的 表单 域 吧 。 





Title 








| I can only enter a certain number of characters into this field. 








图 18-1 


如 图 18-1 所 示 ， 你 在 某 个 受 限 表单 域 中 输入 了 一 条 完整 的 字符 串 ， 提 交 
表单 ， 然 后 看 到 如 图 18-2 这 样 一 条 信息 : You can enter no more than 50 
characters.〈 你 只 能 输入 50 个 字符 。) 


Title 


I can only enter a certain number of characters into this field. 





You can enter no more than 50 characters. 





图 18-2 


自然 ， 这 个 限制 会 迫使 你 一 个 字 一 个 字 地 去 数 已 经 输入 的 字符 ， 然 后 考 
虑 如 何 调整 以 减少 字数 来 满足 条 件 。 而 这 是 一 个 兄长 、 乏 味 又 糟糕 的 事 
情 ， 还 不 能 不 做 。 于 是 你 感到 愤怒 ， 而 且 由 于 不 知道 空格 是 否 应 该 计算 
在 内 ， 你 对 自己 的 计算 结果 是 否 精确 也 毫 无 自信 了 。 


而 男 一 种 常见 的 情况 是 ， 你 快乐 地 一 直 打 着 字 ， 结 果 却 发 现 键盘 出 了 毛 
病 。 

如 图 18-3 所 示 ， 你 键入 了 整整 一 篇 小 说 ， 结 果 却 发 现 最 后 200 个 字符 根 
本 没有 输 进去 。 为 了 找 出 是 哪里 出 了 毛病 ， 也 许 你 会 打开 男 一 个 程序 输 
入 某 些 东西 以 确保 你 的 键盘 仍然 正常 ， 也 许 你 会 到 电脑 背后 检查 键盘 的 
USB 插口 是 否 松 控 了， 我 自己 就 曾经 干 过 。 



































Title 





[ I can only enter a certain number of characters into this fie 








图 18-3 


就 像 这 样 ， 一 个 普通 的 输入 域 会 让 你 怀疑 整 台 电脑 发 生 了 故障 。 
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dE. 

这 就 是 你 想 为 用 户 创 造 的 瞬间 吗 ? 我 不 这 么 想 。 幸 运 的 是 ， 这 个 问题 很 
好 解决 。 

18.1.1 编辑 中 的 poka-yoke 

我 们 只 需要 一 个 简单 的 方式 让 用 户 知道 发 生 了 什么 。 首 先 ， 让 他 们 知道 
这 里 有 字数 限制 ， 其 次 ， 让 他 们 知道 何 时 会 到 达 这 个 限制 。 


poka-yoke 可 以 拯救 你 ! 就 如 我 在 Designing the Obvious 一 书 中 所 说 ， 
poka-yoke 是 一 个 日 语词 汇 ， 意 思 是 “防止 错误 ”。 其 含义 有 二 : 侦 测 机 
制 和 预防 机 制 。 我 很 乐于 找到 办 法 在 网 上 应 用 这 个 想法 。 


侦 测 机 制 就 是 让 用 户 知道 有 错误 发 生 ， 并 且 使 他 能 够 立刻 修正 。 各 种 出 
错 信息 都 属于 poka-yoke 的 侦 测 机 制 。 
而 预防 机 制 则 表示 在 一 开始 就 避免 错误 发 生 ， 并 且 受 限 表单 域 就 是 实践 
这 一 想法 的 好 地 方 。 
最 简单 的 解决 方案 就 是 加 上 一 条 说 明 性 文字 ， 向 用 户 解释 这 里 的 字数 不 
能 超过 50 个 字符 。 如 图 18-4 所 示 。 






































Title 
I can only enter a certain number of characters into this fie 














Enter up to 50 characters. 





18-4 


这 能 让 用 户 知 道 限制 条 件 ， 所 以 他 们 就 不 会 疑惑 为 什么 键盘 突然 失灵 了 。 
但 如 果 在 到 达 限 制 时 没有 任何 提示 ， 他 们 仍然 需要 计算 字符 数 : 
“I can only enter! =+ 让 我 们 看 看 i 这 里 有 13 个 字符 ， 所 以 CT 我 还 


能 再 输入 37 个 。 好 ……… ‘a certain number’ ++ ， 现 在 多 少 个 了 ?还 有 
空格 应 该 算 进 去 吗 ? M, BITIR.” 


为 了 在 这 段 说 明文 字 中 加 强 poka-yoke 机 制 ， 我 把 文本 中 的 数字 50 BUR 
了 一 个 不 断 减 少 的 变量 。 
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如 图 18-5 所 示 ， 现 在 当 用 户 输 入 时 ， 每 增加 一 个 字符 这 个 数字 就 会 减 
少 。 用 户 能 在 整个 输入 过 程 中 确切 地 了 解 自 己 还 能 输入 多 少 字符 。 当 然 ， 
如 果 删 除 字符 ， 这 个 数字 就 会 增加 。 


Title 
[lean only enter a cer 








You can enter up to 33 more characters. 





18-5 


见 图 18-6， 即 使 他 到 达 0 后 ， 也 仍然 能 继续 调整 输入 的 文字 。 


Title 


| can only enter a certain number of characters into this fie 





You can enter up to 0 more characters. 





图 18-6 


整理 好 这 一 设计 之 后 ， 我 立刻 将 其 设 制 为 一 条 标准 ， 还 发 表 了 一 篇 关于 
它 的 博客 。 


而 就 在 那 时 有 人 指出 这 个 设计 还 有 点 小 问题 。 

对 于 使 用 屏幕 阅读 器 的 用 户 来 说 ， 因 为 屏幕 阅读 器 是 按 上 下 顺序 来 阅读 
页 面 的 ， 所 以 这 些 用 户 只 可 能 在 出 现 问题 之 后 才 会 发 现 这 个 关于 字数 限 
制 的 信息 。 

REK., 

要 弥补 这 一 点 ， 我 仅仅 只 需 把 这 个 不 断 减 少 的 变量 挪 到 表单 域 的 上 方 ， 
JLA] 18-7. 





Title 
You can enter up to 33 more characters. 





I can only enter a cer 





图 18-7 
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没 错 ， 使 用 屏幕 阅读 器 可 能 需要 来 回 地 使 用 Shift ^ Tab， 不 断 地 把 焦点 
切 回 到 该 信息 上 以 得 知 还 剩 下 多 少 个 字符 ， 但 至 少 在 输入 之 前 就 能 了 解 
字数 限制 条 件 ， 而 且 能 随时 检查 当前 的 字符 数 。 


18.1.2 ”一 点 小 警告 


顺带 一 提 ，Twitter 网 站 "在 设计 字符 计数 方面 走 得 更 远 。 一 开始 不 断 减 少 
的 变量 是 灰色 文字 ， 而 一 旦 用 户 输入 字符 数 超过 了 120， 该 变量 就 会 变 
红 ， 提 醒 他 们 还 剩 下 不 到 20 个 字符 了 。 

干 得 很 棒 。 

即使 用 户 在 一 开始 不 会 注意 到 这 个 文本 ， 但 是 通过 颜色 变化 这 种 方式 也 
会 在 输入 时 引起 他 们 的 注意 。 红 色 能 在 绝 大 部 分 网 页 中 凸显 出 来 ， 而 且 
突然 出 现 的 红色 通常 能 打 断 用 户 的 输入 ， 计 他们 注意 到 字符 计数 右 。 

我 对 该 设计 唯一 的 问题 就 是 ， 这 个 字符 计数 器 本 身 没有 相关 的 文本 或 标 
签 来 解释 它 。 如 图 18-8 所 示 ， 只 是 一 个 单独 的 数字 放 在 输入 域 的 右上 
方 。 











NS 











What are you doing? 


Wondering why Twitters character counter has no label.| 


update 





图 18-8 
不 管 怎 样 ， 加 入 简单 的 字符 计数 带 便 能 把 一 个 潜在 的 错误 转变 成 男 一 个 
“原来 使 用 这 个 产品 只 需 常识 ”的 瞬间 。 


不 再 迫使 用 户 自 己 逐 字 计 算 字 符 ， 也 避免 了 他 们 在 看 到 出 错 信息 前 白白 
输入 过 多 ， 只 需 添 加 简单 的 字符 计数 器 ， 这 个 交互 就 一 目 了 然 了 。 











CD Twitter.com 是 一 个 能 让 朋友 、 家 庭 和 工作 伙伴 之 间 通 过 记录 日 常 琐事 而 随时 保持 联 
系 的 在 线 服 务 。 网 站 地 址 为 http:Wtwittercom/。 一 一 译 者 注 
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互联 网 ， 其 中 很 大 的 一 部 分 乐趣 在 于 参与 。 


我 们 以 前 只 是 被 动 的 浏览 者 ， 现 在 却 可 以 和 其 他 人 联系 交流 、 管 理 和 编 
辑 自己 和 其 他 人 的 信息 、 共 享 想法 、 制 定 计 划 ， 以 及 其 他 各 种 好 玩 的 事 。 


而 今天 你 有 无 数 种 方式 可 以 加 入 进来 ， 并 且 网 络 社交 技术 的 提高 也 使 得 
我 们 可 以 做 任何 事情 。 你 可 以 和 身 处 日 本 的 小 孩 打 扑克 ， 也 可 以 和 正在 
1000 英里 外 出 差 的 朋友 随时 保持 联系 。 


不 过 ， 尽 管用 户 可 以 尽兴 地 为 博客 写 回复 、 在 Facebook "上 交 朋 友 ， 或 
者 通过 某 个 网 站 构建 工具 为 自己 设计 网 页 ， 这 种 种 瞬间 中 都 充斥 着 混淆 、 
丧失 自信 的 可 能 性 。 
在 这 一 部 分 ， 我 会 讲述 一 些 关 于 参与 的 故事 ， 并 讨论 一 些 原 则 ， 和 希望 能 
帮助 你 们 为 用 户 把 这 些 瞬 间 变 得 更 积极 和 易于 理解 。 

后 面 6 章 中， 我 会 论述 为 什么 说 “清楚 ” 比 “ 有 效 ” 更 为 重要 、 如 何 鼓 
励 和 激发 社交 行为 ， 甚 至 说 为 什么 “跟从 ”人 们 在 网 站 的 动向 会 比 成 为 
他 们 的 “朋友 ”更 加 合适 。 


不 管 潜在 的 目的 是 什么 ， 哪 怕 是 最 复杂 的 交互 ， 也 能 变 成 令 人 愉快 的 瞬 
间 。 
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CD 众所周知 ，Facebook 是 一 个 通过 上 传 照 片 来 结交 朋友 或 与 亲友 保持 联系 的 在 线 
服务 ， 目 前 其 范围 扩展 到 了 视频 、 游 戏 等 方面 。 网 站 地 址 为 http://www.facebook. 
com/。 一 一 译 者 注 
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在 为 第 1 章 中 平面 设计 师 社区 设计 时 ， 我 遇 到 的 一 个 挑战 就 是 要 构建 一 
套 更 有 意义 的 用 户 个 人 资料 系统 ， 而 不 仅仅 只 是 包含 网 站 成 员 信息 的 简 
单 页 面 。 


我 所 做 的 并 不 算 什么 革命 或 创新 ， 但 它 是 一 个 很 好 的 例子 ， 说 明了 应 用 
程序 本 身 的 设计 确实 能 够 影响 到 用 户 所 需 的 信息 类 型 。 


在 很 多 网 站 里 ， 用 户 的 个 人 资料 包含 了 他 们 的 一 些 重要 信息 ， 比 如 他 的 
名 字 、 网 站 URL 地 址 、 即 时 消息 信息 ， 可 能 还 包括 他 的 兴趣 爱好 ， 以 及 
为 什么 加 入 这 个 网 站 的 简介 。 这 种 设计 对 于 其 他 网 站 成 员 来 说 并 不 一 定 
很 有 帮助 ， 因 为 它 只 是 存放 了 该 用 户 的 这 些 信 息 而 已 ， 成 员 相互 之 间 并 
没有 得 到 推介 。 然 而 一 定 程度 上 的 温暖 感 仍然 能 诱 使 一 些 新 用 户 花费 宝 
贵 的 时 间 输入 这 些 细节 信息 。 


然而 ， 在 这 个 平面 设计 师 的 社区 中 ， 我 们 知道 有 一 些 不 同 种 类 的 用 户 ， 
比如 设计 师 ， 以 及 那些 需要 设计 师 合 作 的 人 《客户 )。 我 们 还 知道 ， 经 党 
有 些 用 户 喜 欢 研究 其 他 用 户 收藏 的 最 喜爱 项 目 案例 、 评 论 回复 以 及 个 人 
上 传 的 案例 ， 和 希望 这 些 能 让 他 们 看 到 更 多 好 的 内 容 。 比 如 说 ， 当 Josh 很 
中 意 某 个 项 目 案例 时 ， 他 很 可 能 还 希望 看 到 该 设计 师 的 其 他 案例 。 同 样 
Hh, Josh 可 能 还 会 注意 到 另 一 位 客户 Sarah 在 某 个 项 目 上 给 的 费用 很 高 ， 
那么 他 也 许 会 想 看 看 与 Sarah 合作 的 那些 设计 师 。 


为 了 满足 这 些 需求 ， 首 先 我 们 将 创建 资料 的 过 程 分 层 ， 然 后 设计 了 一 种 
能 自动 变化 的 个 人 资料 页 面 ， 让 它 能 动态 地 记录 用 户 在 网 站 上 的 行为 ， 
就 好 像 汽车 的 仪表 盘 一 般 。 


让 我 来 解释 一 下 。 



















































































140 第 19 章 创建 个 人 资料 


C19.1 递 进 地 增加 
决定 在 本 网 站 注册 的 每 一 位 用 户 都 会 被 要 求 填 写 基本 的 个 人 资料 信息 ， 


它们 包括 用 户 的 姓名 、 电 子 邮 件 地 址 、 密 码 以 及 信用 卡 信 息 。 如 图 19-1 
所 示 。 


Sign out | My Account | Contact Us | Help 























Artist, catogory, project, etc. Edit profile 
General 

My Account First name: 

Inbox (5) ; 

Projects (2) Last name: 

Bids (14) 

My Protte Email address: 

Create a gallery [ e.g. me&mydomain.com 

Write journal entry 

Visi the forums 

etc... Change password 








New password: 








Confirm new password: 








Credit card information 
Name on card: 




















Card 4: 

Expiration: Security code: 
[e A [e [8]. | | == 
CD cum 








图 19-1 


然而 ， 平面 设计 师 则 必须 再 做 一 些 其 他 用 户 不 需要 做 的 事情 ， 例 如 创建 
个 人 案例 集 、 标 明 工 作 费 用 以 及 职能 范围 ， 还 有 指定 自己 的 专业 领域 。 

为 了 做 到 这 一 点 ， 我 们 使 用 了 分 层 的 方式 。 任 何 创建 案例 集 的 人 都 需要 
填写 一 些 额 外 信息 ， 而 填写 的 内 容 将 会 添加 到 他 们 的 个 人 资料 中 。 这 些 
信息 只 面向 那些 试图 通过 本 网 站 推销 自己 的 设计 师 。 如 图 19-2 所 示 。 
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因为 上 只 有 平面 设计 师 才 需要 输入 这 些 信 息 ， 所 以 我 们 把 它们 放 到 了 注册 
程序 之 外 。 简 单 来 说 ， 我 们 不 希望 登录 用 户 感觉 只 有 设计 师 才 能 注册 。 


Sign out | My Account | Contact Us | Help 















































Artist, category, project, eic Tell us about your services 
This information will appear as part of your profile from now on. 
( Saren ) 
UL Rate and availability 
My Account Rate: 
Inbox (5) $0.00 per | hour B 
Projects (2) Availability: 
3 Contract only |$ 
How soon could you start a new project? 
Inone week |$ 
Visit the forums 
tc... Your specialties: 
Enter as many as you want. 
Graphic design |? 

















Add another specialty 


Additional comments 
Tell us more about yourself: 











(me) cae 





图 19-2 
那些 招募 设计 师 进 行 项 目 合作 、 或 者 只 是 浏览 网 站 找寻 灵感 的 人 ， 将 不 
会 看 到 要 求 填 写 这 些 附 加 资料 的 表单 。 
19.1.1 把 数据 变 成 仪表 盘 
不 管用 户 属于 什么 类 型 ， 设 计 师 、 客 户 、 或 者 爱好 者 ， 系 统 都 会 自动 为 
每 位 用 户 创建 一 个 个 人 资料 页 面 ， 并 且 其 他 所 有 网 站 成 员 都 能 看 到 。 
当 用 户 在 网 站 里 有 所 举动 时 ， 个 人 资料 页 面 就 会 相应 地 更 新 以 便 反 映 他 
的 行为 。 
如 图 19-3 所 示 ， 如 果 John 创建 了 自己 的 案例 集 、 收 藏 了 其 他 人 的 案例 


集 、 标 明了 职能 范围 和 工作 费用 、 发 表 了 博客 文章 等 等 ， 他 的 个 人 资料 
页 面 就 会 相应 更 新 以 便 显 示 这 些 信息 。 
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任何 网 站 成 员 都 可 以 浏览 其 他 成 员 的 个 人 资料 ， 了 解 他 喜欢 哪些 案例 、 
创建 了 什么 案例 或 者 评论 了 什么 案例 ， 还 能 阅读 他 的 博客 文章 。 


Sign out | My Account | Contact Us | Help 









































Artist, category, project, eic. About JSMithTheArtist Edit my profile 
Real name: JohnSmith 
Design specialty: Graphic, Industrial 
Account Avaliability: Contract 
— avatar Rate(s): $60/hour, or by project 

Inbox (5) 
Projects (2) 
Bids (14) 
My Prote John's Galleries Edit 
Creato a gallery Gallery title 
Visit the forums T Description of gallery goes here, as specified by artists when creating 
elc. the gallery 

Gallery title 
Latest posts Description of gallery goes here, as specified by artists when creating 

the gallery 
Post title 
This is a snippet from the 
most recent blog post from Favorite Galleries (by other artists) Edit 
this artist. 

Gallery title 
Post title Description of gallery goes here, as specified by artists when creating 
This is a snippet from the the gallery 
most recent blog post from 
this artist. Gallery title 

Description of gallery goes here, as specified by artists when creating 
Post title the gallery 
This is a snippet from the 
most recent blog post from 
this artist. 














图 19-3 


这 种 个 人 资料 页 面 展 示 的 内 容 和 固定 资料 页 面相 比 ， 明 显要 更 加 充实 和 
生动 。 它 变 成 了 一 个 棚 棚 如 生 的 用 户 行为 记录 。 


这 样 做 有 很 多 好 处 。 首 先 ， 只 要 找到 了 中 意 的 案例 ， 就 能 马上 点 击 查看 
该 作者 的 其 他 案例 。 其 次 ， 当 看 到 有 符合 自己 品味 的 评论 或 标价 时 ， 你 
也 能 很 方便 地 查看 该 作者 喜欢 的 其 他 案例 以 及 他 对 它们 的 评价 。 


换 句 话说 ， 你 可 以 把 任何 用 户 的 个 人 资料 页 面 作为 寻找 优秀 内 容 的 入 口 。 
如 果 你 发 现 另 一 位 客户 Sarah 喜欢 的 东西 和 自己 非常 一 致 ， 你 便 可 以 通 
过 Sarah 的 个 人 资料 看 看 她 最 近 查 看 过 的 东西 。 
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19.1.2 ”空白 资料 页 面 


如 果 用 户 注 册 后 没有 任何 行动 ， 那 么 他 的 个 人 资料 就 会 是 一 个 空白 资料 
页 面 。 


空白 资料 页 面 里 面 没 有 任何 数据 信息 ， 只 有 该 用 户 出 现 某 种 行为 才 会 添 
加 。 由 于 目前 这 位 用 户 在 网 站 里 还 没有 做 任何 事 ， 例 如 收藏 某 位 设计 师 
的 案例 ， 所 以 他 的 个 人 资料 里 面 几乎 空空 如 也 。 


空白 资料 页 面 的 好 处 在 于 它们 可 以 鼓励 人 们 采取 行动 。 我 们 这 个 例子 中 ， 
没有 个 人 资料 信息 的 资料 页 面 会 提供 一 些 链接 ， 方 便 用 户 浏 览 各 个 案例 、 
创建 案例 集 等 等 。 这 种 方式 将 更 能 刺激 尚未 采取 行动 的 用 户 开 始 创 建 自 
己 的 案例 集 ， 或 者 发 表 评论 。 


个 人 资料 通常 包含 一 些 用 户 人 简单 的 个 人 细节 信息 ， 但 个 人 资料 也 能 提供 
某 种 机 会 。 在 这 个 例子 里 ， 个 人 资料 变 成 了 一 种 有 效 的 人 际 交 往 手 段 ， 
提供 了 一 条 清晰 的 途径 来 了 解 其 他 成 员 的 喜 恶 。 
通过 提供 这 种 信息 ， 用 户 将 开始 信任 与 之 品味 类 似 的 成 员 ， 并 且 会 时 常 
回访 ， 获 知 他 们 最 近 的 浏览 内 容 。 也 正 因为 这 种 信任 ， 他 们 也 有 理由 一 
次 又 一 次 地 反复 光顾 这 个 网 站 。 
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i 辑 





在 第 3 章 ， 我 谈 到 曾经 重新 设计 了 一 个 在 线 网 站 产品 的 导航 。 本 章 我 想 
谈 谈 同 一 个 产品 的 另 一 个 问题 一 一 编辑 功能 ， 这 可 比 稍稍 修改 一 下 导航 
菜单 要 麻烦 得 多 。 


这 个 产品 就 是 多 功能 症 的 负面 典型 。 在 科学 术语 中 ， 多 功能 症 是 指 产品 
由 于 包含 过 多 功能 而 引起 的 一 种 可 用 性 低下 的 疾病 〈 好 吧 ， 这 并 不 是 很 
科学 )。 


在 我 们 这 个 例子 中 ， 一 大 堆 的 功能 被 塞 到 产品 中 ， 造 成 了 极为 繁复 的 用 
户 体 验 。 而 这 一 点 在 它 的 编辑 功能 (该 产品 最 基本 、 最 常用 的 功能 ) 中 
则 尤为 突出 。 

只 要 用 户 试图 执行 某 个 编辑 任务 ， 不 管 是 为 某 段 文本 调整 格式 还 是 在 页 
面 中 插入 图 片 ， 系 统 总 会 弹出 同一 个 窗口 。 而 几乎 所 有 的 交互 部 得 和 这 
个 讨厌 的 弹出 窗口 打交道 。 






















































































这 个 弹出 窗口 包含 了 文本 格式 工具 、 图 片 编辑 工具 、 插 入 时 间 戳 、 创 建 
RSS 的 Feed …… 只 要 是 你 能 叫 出 名 字 的 ， 都 在 里 面 。 









































很 自然 ， 我 非常 疑惑 为 什么 不 能 把 这 些 工 具 放 在 主 界面 里 ， 从 而 去 掉 弹 
出 窗口 。 而 同时 我 也 很 疑惑 何苦 让 用 户 每 次 都 得 在 这 么 一 大 堆 工 具 中 费 
劲 地 找寻 自己 需要 的 那 一 个 。 























(DRSS (Really Simple Syndication) 是 一 种 用 于 共享 网 上 新 闻 频道 、 博 客 和 其 他 Web 
内 容 的 数据 交换 规范 。 这 种 描述 和 同步 网 站 内 容 的 格式 是 目前 使 用 最 广泛 的 XML 
应 用 。 用 户 订阅 了 某 个 站 点 的 RSS 之 后 ， 不 用 登录 该 网 站 就 能 通过 自己 的 浏览 
dz RSS 阅读 器 随时 了 解 该 网 站 的 更 新 情况 。 也 有 人 说 RSS 的 全 称 为 Rich Site 
Summary 〈 丰 富 站 点 摘要 )。 所 谓 Feed 就 是 指 RSS 的 源 ， 其 中 包含 的 信息 能 直接 被 
其 他 站 点 调用 。 一 一 译 者 注 
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比如 说 ， 要 想 为 文本 设置 格式 ， 用 户 必 须 把 鼠标 移动 到 文本 上 ， 在 随 之 
出 现 的 小 菜单 中 选择 Edit〈 编 辑 )， 然 后 等 待 弹出 窗口 出 现 并 载 人 各 种 工 
有 具 。 这 些 完成 之 后 ， 他 必须 先 在 弹出 窗口 中 选择 想 编辑 的 文本 ， 然 后 在 
工具 栏 的 众多 图 标 里 找到 想 要 的 那个 ， 例 如 Bold (设置 粗 体 )。 确 认 了 格 
式 变化 之 后 ， 他 还 得 先 单 击 Save 保存， 按钮 ， 等 待 弹出 窗口 关闭 ， 然 
后 再 等 待 主 界面 里 面 的 文本 更 新 。 


如 有 果 这 位 用 户 想 修改 男 一 段 文本 的 格式 ， 他 必须 重 来 一 次 。 如 有 果 想 撤销 
这 次 改动 ， 他 唯一 的 选择 也 是 重复 同样 一 系列 步 又 。 


正如 你 所 想象 的 ， 在 进行 几 次 修改 后 这 个 过 程 就 会 变 得 相当 单调 乏味 。 
无 论 如 何 这 些 都 称 不 上 令 人 愉快 的 瞬间 。 


而 随后 的 两 轮 可 用 性 测试 也 证 实 了 这 一 猜想 。 我 们 的 测试 者 连 最 基础 的 
任务 都 失败 了 ， 其 中 一 些 测试 者 还 不 是 第 一 次 使 用 这 个 产品 。 


绝 大 部 分 情况 下 ， 这 个 弹出 窗口 里 所 有 的 编辑 工具 都 能 够 使 用 。 导 航 用 
户 在 其 中 很 难 找到 完成 手头 任务 所 需要 的 工具 。 整 个 弹出 窗口 里 面 大 概 
有 一 百 多 个 不 同 的 工具 和 选项 ， 但 其 中 只 有 3-4 个 能 真正 满足 所 有 的 任 
务 。 比 如 说 ， 修 改 文本 格式 时 ， 择 入 日 历 图 标 就 没有 用 ， 其 至 还 会 妨碍 
用 户 。 而 这 个 弹出 窗口 中 的 大 部 分 工具 都 和 最 常用 的 任务 无 关 。 


而 把 所 有 这 些 工具 放 在 一 个 弹出 窗口 中 ， 这 意味 着 迫使 用 户 脱离 了 任务 
环境 本 身 。 他 们 无 法 看 着 页 面 进行 编辑 ， 因 为 弹出 窗口 挡 在 了 中 间 。 


由 于 资源 缺乏 ， 在 我 加 入 之 前 ， 这 一 项 目 没有 交互 设计 师 参 与 过 开发 。 
程序 人 员 在 一 开始 尽 了 自己 最 大 的 努力 〈 尽 管用 户 和 内 部 管理 层 不 停 地 
要 求 添加 功能 )， 时 刻 说 记 以 保证 用 户 的 兴趣 为 出 发 点 做 出 决定 。 然 而 ， 
缺乏 对 可 用 性 的 次 刻 理 解 和 产品 发 展 的 长 远 计 划 ， 最 后 导致 开发 者 不 得 
不 被 迫 往 里 面 添加 一 个 又 一 个 的 新 功能 。 同 时 因为 缺乏 整理 头绪 的 时 间 
和 有 效 的 执行 力 ， 开 发 者 落 入 了 陷阱 。 他 们 唯一 能 做 的 就 是 在 界面 里 找 
寻 空 余 的 地 方 塞 人 新 功能 ， 然 后 祈祷 能 凑合 过 去 。 


关于 这 个 产品 他 们 听 到 的 抱怨 和 我 一 样 ， 也 和 我 一 样 对 此 感到 厌倦 。 幸 
运 的 是 ， 我 们 在 几 个 关键 之 处 达成 了 共识 ， 从 而 能 够 开始 进行 再 设计 。 


我 们 从 编辑 功能 着 手 。 
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清除 这 一 片 混乱 并 不 容易 。 项 目 开发 者 以 及 我 团队 里 的 其 他 设计 师 花 费 
了 儿 天 时 间 进 行 讨 论 和 白板 会 议 ， 最 后 提出 了 一 个 技术 上 可 行 、 又 能 
决 大 部 分 显著 的 可 用 性 问题 的 方案 。 


C20.1 在 正确 的 时 间 显 示 正 确 的 工具 


要 想 减 轻 编 辑 功 能 的 混乱 程度 ， 最 好 只 显示 与 当前 任务 相关 的 工具 ， 同 
时 我 们 也 希望 用 户 能 直接 地 编辑 他 们 的 网 页 ， 而 不 是 被 带 到 男 一 个 界面 。 


在 这 个 过 程 中 ， 我 们 希望 能 让 这 个 功能 超载 的 产品 看 上 去 更 简单 一 点 。 
尽管 它 几 乎 无 所 不 能 ， 但 我 们 相信 ， 在 正确 的 时 间 显示 正确 的 工具 ， 能 
让 每 个 任务 更 加 容易 。 


我 们 把 所 有 的 工具 和 选项 从 弹出 窗口 上 挪 出 来 ， 放 到 了 主 界面 中 ， 就 在 
被 编辑 网 页 旁边 。 这 个 举措 解决 了 任务 的 环境 问题 ， 但 最 棘手 的 难题 还 
在 后 头 。 

怎样 才能 隐藏 那些 和 当前 任务 无 关 的 工具 和 选项 呢 ? 

我 们 曾 考 虑 简单 地 把 工具 置 灰 ， 让 它们 无 法 使 用 。 但 是 这 意味 着 用 户 将 
不 能 在 中 途 改 变 主意 。 比 方 说 ， 如 果 在 用 户 选 中 好 文本 时 把 图 片 编辑 工 
有 具 置 灰 ， 那 么 本 来 想 编辑 文本 的 用 户 就 无 法 在 中 途 转 而 去 插入 一 张 图 片 
Ta 

因此 ， 在 隐藏 无 关 工 具 的 同时 ， 我 们 还 必须 确保 所 有 的 工具 在 任何 时 间 
都 能 被 用 户 找到 。 

我 们 考虑 了 一 种 设计 ， 类 似 于 在 很 多 Adobe 产品 中 用 到 的 Properties 〈 属 
TE» 面板 。 例 如 Adobe Flash。 见 图 20-1. 


这 种 面板 上 的 选项 会 根据 用 户 当 前 使 用 的 工具 而 改变 [图 20-1 中 显示 的 
Æ Flash 里 Text Tool. (文本 工具 ) 选项 ]。 

它 可 以 办 到 只 显示 与 任务 相关 的 控件 ， 但 我 们 不 能 让 屏幕 上 满 是 这 些 控 
件 面 板 。 所 以 这 种 设计 不 能 保证 用 户 能 随时 使 用 所 有 其 他 的 工具 。 
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[© Properties x [ Filters | Parameters | 
T Dynamic Text S| A [Lucida Grande 168 re T] mB7| Ceg [3] * 
Text Tool ay lo |v| a$ [Normal E) Anti-alias for readability E Embed... 
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图 20-1 


幸运 的 是 ， 我 们 知道 可 折 爱 面板 控件 〈 在 14 章 讨论 过 )。 在 进行 这 个 项 
目的 同时 我 们 还 有 其 他 几 个 项 目 ， 其 中 某 几 个 就 用 到 过 这 种 可 折 和 县 面板 ， 
所 以 我 们 想 把 它 也 作为 一 个 选择 考虑 进来 (为 了 保持 图 片 更 容易 辨识 ， 
我 只 在 这 里 展示 了 可 折 对 面板 和 编辑 区 域 。 要 想 展示 整个 界面 铠 怕 得 需 
要 更 大 的 一 本 书 )。 见 图 20-2。 
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Site-wide options 
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Design (©) | dotheriahtthing.com 
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Layout Training 
Extras Learn more about our clients » T 











图 20-2 


Max TRI BU s P E AER, RATRE n] UTER i e T8 LBS T 
和 选项 表面 化 。 而 根据 用 户 不 同 的 行为 ， 相 对 应 的 面板 便 会 自动 打开 。 


例如 ， 用 户 点 击 某 个 文本 段 时 ，Text 〈 文 本) 面板 将 会 自动 打开 。 见 图 
20-3. 












Text editing options 


Featured client 
(eJ) | dotherightthing.com 





20-3 


这 个 面板 将 会 提供 格式 选项 ， 例 如 Bold CHK), Italic (RHE), Under- 
line (下 划 线 ) 等 ， 它 同时 还 包括 一 个 菜单 ， 可 以 用 于 选择 字体 、 字 号 以 
及 字体 颜色 。 


这 些 就 是 在 正确 时 间 里 显示 的 正确 工具 。 用 户 点 击 某 个 文本 段 时 ， 不 管 
他 们 是 想 写 、 修 改 还 是 想 设 置 文字 格式 ， 这 些 都 是 能 够 方便 取 用 的 工具 。 
用 户 点 击 图 片 时 将 会 打开 Images (图像) 面板， 展现 编辑 图 片 所 需 的 选 
项 。 点 击 网 页 中 的 空白 区 域 则 会 打开 Site GERO 面板 ， 出 现 的 选项 可 以 
应 用 于 整个 站 点 ， 例 如 Create Page (创建 新 页 面 ) 和 Organize Navigation 
(组 织 导航 栏 )。 

我 们 花 了 数 天 时 间 弄 清楚 在 每 个 面板 中 应 该 放 些 什么 工具 ， 以 及 如 何 为 
用 户 提供 不 在 面板 中 的 工具 。 


解决 办 法 也 很 简单 : 应 用 递 进 显示 (Progressive disclosure) 原则 。 


20.1.1 把 高 级 的 玩意 藏 起 来 

正如 在 第 11 章 和 第 16 章 中 讨论 的 ， 递 进 显 示 是 一 种 根据 功能 是 否 普及 
或 必要 逐步 展现 它们 的 方法 。 

这 个 例子 中 ， 只 显示 与 任务 相关 的 工具 一 点 错 也 没有 。 但 我 们 也 仍然 需 
要 一 种 方式 用 来 提供 其 他 工具 或 选项 ， 以 备 不 时 之 需 。 
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所 以 我 们 设计 了 一 种 文档 模式 "对 话 框 ， 用 它 来 容纳 附加 的 选项 。 文 档 模 
式 是 说 ， 对 话 框 将 短暂 地 阻止 用 户 和 被 编辑 网 页 之 间 的 交互 ， 即 无 法 使 
JH Edit〈 编 辑 ) 面板 ， 但 用 户 仍 然 能 够 与 应 用 程序 的 其 他 部 分 以 及 浏览 
器 本 身 交 互 。 


比如 说 ， 用 户 点 击 某 个 文本 段 后 ， 打 开 的 Text 面板 里 包含 了 一 个 将 选中 
文本 变 成 超 链 接 的 选项 。 但 我 们 不 能 把 与 超 链 接 有 关 的 所 有 选项 都 放 在 
可 折 双 面板 里 面 ， 而 是 把 它们 挪 到 了 一 个 对 话 框 里 。 

所 以 ，Edit 面板 变 暗 而 且 不 可 用 ， 同 时 这 个 对 话 框 在 同一 个 屏幕 区 域 打 


开 。 在 对 话 框 里 ， 选 择 超 链接 的 相关 选项 ， 然 后 单 击 Finished GAR) 按 
钮 创建 这 个 链接 。 见 图 20-4. 






















































| Design | Pageproperies | 
Site 


[B] [7] (U] T: 


Create p @ Another page on this site 
About Us 
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交互 的 触发 器 Create a link〔 创 建 链接 ) eui Suren d grs pop, mix 





功能 的 选项 则 出 现在 对 话 框 里 。 

















与 应 用 程序 模式 对 话 框 不 同 ， 文 档 模式 对 话 框 将 阻止 用 户 和 当前 文档 窗口 发 生 其 
他 任何 交互 ， 但 用 户 可 以 切换 到 该 应 用 程序 中 的 其 他 文档 窗口 ， 或 者 切换 到 其 
他 应 用 程序 。 读 者 可 以 通过 以 下 链接 查阅 Apple 的 人 机 界面 指南 (Apple Human 
Interface Guidelines) 中 € 于 document-modal 的 详细 说 明 http://developer.apple. 
com/ documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGWindows/ 
chapter 18 section 7.html. 译 者 注 





































































































150 第 20 章 编 g 


20.4.2 ”打扫 干 净 


在 写 这 一 章 时 ， 还 有 不 少 人 在 使 用 这 款 产 品 。 从 功能 上 来 讲 ， 它 还 是 非 
常 缓慢 、 策 重 。 毕 竟 创 建 网 站 可 不 是 件 轻松 的 事 ， 但 我 们 对 于 编辑 功能 
的 检查 在 相当 程度 上 仍然 改进 了 产品 的 可 用 性 。 


在 某 个 应 用 产品 中 ， 如 果 你 发 现 要 完成 某 些 任务 时 会 牵扯 到 非常 多 的 工 
有 具 和 选项 ， 那 么 最 好 是 尽快 以 全 新 的 眼光 重新 检视 ， 然 后 设法 加 以 改进 。 
在 我 们 这 个 例子 里 ， 递 进 显 示 就 是 关键 : 只 显示 每 项 任务 需要 的 工具 和 
选项 的 关键 。 

关键 就 是 在 正确 的 时 间 显 示 正 确 的 工具 。 通 过 这 种 方式 ， 完 成 任务 所 需 
要 的 步骤 和 用 户 需 要 做 出 的 决定 都 大 大 减少 了 ， 这 证 每 一 次 交互 都 更 容 
易 执行 了 ， 而 且 每 一 个 交互 的 皮 间 都 令 人 更 加 愉快 。 
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,“ 朋 友 ” 一 个 多 么 美好 的 词汇 。 我 们 和 朋友 一 起 笑 ， 一 起 器， 一 起 








偷偷 开小差 。 远 离 电 脑 的 时 候 ， 正 是 这 些 人 陪伴 着 我 们 共度 日 益 宝贵 的 
分 分 秒 秒 。 


但 是 通过 网 络 ， 例 如 Facebook、MySpace、LinkedIn、Twitter 和 其 他 许多 
全 民 媒 体 网 站 ， 我 们 所 建立 的 朋友 关系 与 日 常生 活 中 建立 的 朋友 关系 又 
稍 有 不 同 。 


网 络 的 朋友 关系 通常 带 些 做 作 和 人 为 。 当 然 ， 我 们 也 可 以 像 在 同一 个 网 
站 里 那样 和 真正 的 朋友 去 交往 ， 但 更 常见 的 是 ， 我 们 和 那些 不 认识 的 人 
结交 。 他 们 可 能 是 我 们 在 论坛 里 、 讨 论 组 中 认识 的 ， 也 可 能 是 朋友 的 朋 
友 ， 或 者 是 我 们 素 未 谋面 、 但 一 直 尊 敬 和 倾 交 的 人 等 等 。 


而 有 些 翡 隧 的 是 ， 这 种 朋友 关系 通常 没有 什么 意义 或 深度 。 拿 Facebook 
举 个 例子 。 当 你 在 Facebook 上 和 某 些 人 结交 为 朋友 时 ， 他 们 的 行为 都 会 
列举 在 你 的 Facebook 页 面 上 。 但 是 他 们 的 行为 往往 又 都 是 和 其 他 人 交 朋 
友 、 赠 送 虚 拟 礼物 、 发 消息 等 等 。 当 然 这 很 有 意思 ， 但 是 最 后 你 得 到 的 
并 不 是 真正 的 信息 ， 而 只 是 一 堆 噪音 。 这 可 能 乐趣 无 穷 ， 但 同时 也 毫 无 
目的 ， 至 少 事实 上 如 此 。 


就 这 一 点 而 论 ， 交 友和 其 他 行为 一 样 ， 环 境 不 同 ， 情 况 也 不 同 。 

对 于 Facebook, MySpace 等 网 站 来 说 ， 交 友 是 他 们 业务 开展 的 基石 ， 但 
是 许多 环境 下 的 交友 其 实 毫 无 意义 

当 DoTheRightThing 那 帮 家 伙 决 定 尝试 在 站 点 里 加 入 交友 系统 时 ， 我 猜 
想 这 不 过 是 又 多 了 一 个 不 太 成 功 的 例子 而 已 。 
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DTRT 创立 的 目的 是 想 提 高 人 们 对 一 部 分 企业 道德 或 不 道德 举措 的 意识 。 
这 并 不 是 一 个 很 具 娱乐 性 的 活动 。 当 然 ， 这 种 社会 意识 的 行为 可 以 令 人 
感觉 好 玩 或 者 满足 ， 但 肯定 不 至 于 像 一 场 周末 狂 舞 夜 那样 。 


他 们 的 基本 想法 和 其 他 许多 社交 网 站 一 样 ， 就 是 用 户 能 够 通过 其 他 成 员 
的 个 人 资料 页 面 交友 。 访 问 该 页 面 的 用 户 单 击 Become My Friend (成 
为 我 的 朋友 ) 按钮 ， 然 后 两 人 之 间 立 刻 就 会 产生 一 段 持久 的 、 意 味 深长 
的 友情 。 他 们 可 能 会 在 周末 一 块 参加 街区 扑克 比赛 ， 他 们 的 儿子 可 能 会 
成 为 最 好 的 朋友 ， 并 且 上 同一 所 学 校 ， 最 后 在 集体 婚礼 上 迎娶 一 对 姐 
ik. 


唔 ， 所 以 我 不 是 很 理解 DTRT 里 面 交友 系统 的 目的 。 
我 的 第 一 个 问题 是 ， 当 你 成 为 某 个 人 的 朋友 时 会 发 生 什么 ”? 


结果 是 这 个 想法 太 新 了 ， 新 得 还 没有 人 能 真正 充实 它 。 他 们 知道 自己 想 
误 励 人 们 在 网 站 里 浏览 更 多 的 故事 ， 然 而 事实 上 成 员 通 常 只 会 看 一 个 故 
事 ， 评 分 然后 离开 。 同 时 他 们 还 认为 提供 一 种 方式 供 人 们 沟通 是 种 很 好 
的 刺激 。 


我 觉得 他 们 在 这 里 已 经 有 了 初步 的 概念 ， 但 仍 需 要 一 些 调整 。 
C21.1 朋友 与 随员 


Facebook 提供 了 无 数 种 方式 让 人 们 随时 掌握 朋友 的 动向 ，MySpace 也 是 
如 此 。 然 而 虽然 大 部 分 这 些 功能 和 动向 都 很 不 错 ， 但 在 DTRT 这 种 关注 
社会 变迁 而 不 是 娱乐 的 网 站 上 却 一 点 用 没有 。 


在 DTRT 上 添加 交友 功能 后 正如 图 21-1 所 示 这 个 样子 。 


而 我 们 也 正 是 从 这 里 开始 。 页 面 中 有 一 个 单 击 与 该 用 户 结交 朋友 的 按钮 、 
该 用 户 部 分 朋友 的 头像 ， 以 及 可 以 查看 他 所 有 朋友 的 链接 。 

但 是 这 个 页 面 与 DTRT 的 感觉 并 不 是 非常 贴切 。 因 此 我 和 Rod Ebrahimi 
(DTRT 的 创始 人 )“ 花 了 好 几 天 通过 邮件 相互 发 送 线 框图 ， 并 晶 一 直 讨 
论 在 线 交 友 的 本 质 ， 以 及 这 个 想法 如 何 才 能 适 配 DTRT. 
















































































(D Rod 在 DTRT 网 站 的 个 人 资料 页 面 为 http://dotherightthing.com/users/rod。 一 一 译 者 注 














Robert's Profile 


~ Robert Hoekman, Jr. 
3 34 year old male from Arizona 


Website: http.//miskeeto.com 





About Me 

Doing the right thing for 8 months 

Consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna 


aliquam erat volutpat. Ut wisi enim ad minim veniam, 


quis nostrud exerci tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea commodo consequat. 
Duis autem vel eum iriure dolor in hendrerit in 
vulputate velit esse molestie consequat, vel illum 
dolore eu feugiat nulla facilisis at vero eros. 


Become my friend! 


My Friends 


E:B 
2 à ig 
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How I'm Doing the Right Thing 
Today 


Ryan found my story "Universal to test selling DRM-free 
music" about Universal Music Group important 





Rod found my story "Universal to test selling DRM-free 
music" about Universal Music Group important 


My friend Robert found my story "Universal to test selling 
DRM-free music" about Universal Music Group important 


| posted the story "Universal to test selling DRM-free 
music" 


about Universal Music Group 





2 days ago 

Bober is now friends with Mike Hill. 
Bobert is now a friend! 

John is now a friend! 


My friend Ryan posted the story “New program fights global 
warming" about Virgin Group 


My friend Ryan added the company BioCyte International 


Ryan is now a friend! 


Bod is now a friend! 





图 21-1 
我 们 几乎 得 不 出 答案 。 


某 人 单 击 了 Become My Friend 按钮 后 会 发 生 什 么 ? 什么 样 的 行为 才 会 增 
进 这 种 朋友 关系 ?这些 东 西 是 否 真 的 能 鼓励 网 站 成 员 去 阅读 或 发 表 更 多 
的 故事 ? 

不 管 我 们 怎样 看 ， 交 友 功 能 对 DTRT 来 说 还 是 没什么 意 

我 们 真正 想 要 的 并 不 是 建立 友谊 ， 而 是 一 种 简单 而 又 不 张扬 的 功能 。 它 
能 激发 人 们 阅读 更 多 的 文 草 、 与 网 站 发 生 更 多 的 联系 。 

最 后 ， 我 们 跟从 了 Twitter 网 站 的 领导 。 


Twitter 提供 了 一 种 较为 弱势 、 被 称 为 Follow ( 跟从 ) 的 交友 方案 。 简 单 
来 说 ， 任 何 网 站 成 员 都 可 以 到 另 一 个 成 员 的 个 人 资料 页 面 上 单 击 Follow 
订阅 他 在 Twitter 的 Feed。 
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不 用 付出 太 多 精力 ， 而 同样 能 随时 掌握 男 一 位 成 员 的 动向 。 这 样 就 够 了 。 


我 们 认为 “跟从 ” 某 人 动向 这 种 简单 的 行为 更 适合 DTRT. iiie 8H 
己 跟 从 的 人 发 表 的 文章 ， 或 者 寻找 那些 有 很 多 人 跟从 的 人 ， 你 可 以 很 快 
找到 感 兴趣 的 故事 、 发 现 谁 给 哪个 故事 评 了 高 分 等 等 。 


有 意思 的 是 ， 要 想 扭转 形势 只 需 在 左边 的 工具 栏 里 面 改 几 个 字 就 行 〈 因 
为 真正 的 交友 系统 尚未 构建， 因为 没 人 知道 该 构建 些 什么 。 通 过 线 框图 ， 
我 们 可 以 在 写 代 码 之 前 做 出 任何 决定 ， 也 可 以 随时 修改 )。 


如 图 21-2 所 示 ， 我 们 把 按钮 上 的 文字 Become My Friend 改 为 Follow My 
Activities 〈 跟 从 我 的 动向 )， 然 后 修改 周围 的 文本 以 配合 这 一 改变 。 在 其 
他 成 员 头像 那里 ， 我 们 用 Who's Following Me? 〈 谁 在 跟从 我 ? ) RET 
My Friends 〈 我 的 朋友 们 )， 用 See all 46 followers (查看 所 有 46 位 跟从 
者 ) 代替 了 See all 46 friends (查看 所 有 46 位 朋友 )。 




















Roberts Profile 


~ Robert Hoekman, Jr. 
34 year old male from Arizona 
Website: http.//miskeeto.com 


About Me 

Doing the right thing for 8 months 

Consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna 
aliquam erat volutpat. Ut wisi enim ad minim veniam, 
quis nostrud exerci tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea commodo consequat. 
Duis autem vel eum iriure dolor in hendrerit in 
vulputate velit esse molestie consequat, vel illum 
dolore eu feugiat nulla facilisis at vero eros. 


Follow my activities! 


Who's following me? 


EZB 
2 à E g 


See all 46 followers 
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这 些 简单 的 改变 让 事情 变 得 顺眼 多 了 。 现 在 ，DTRT 成 员 在 个 人 资料 页 
面 简单 扫 一 眼 就 能 看 到 其 他 各 种 人 在 网 站 上 的 行为 。 理 论 上 来 说 ， 这 能 
够 激发 他 们 去 阅读 或 发 表 更 多 的 故事 。 
不 在 场 时 的 照片 

在 写 这 一 章 时 ， 这 个 系统 还 没有 被 构建 好 而 尚未 添加 到 网 站 中 ， 所 以 我 
不 能 断定 在 那 一 刻 我 们 是 否 做 出 了 决定 。 但 我 们 已 经 仔细 研究 了 问题 ， 
并 且 根 据 领悟 力 做 出 了 决定 ， 因 此 我 们 相信 网 站 肯定 会 变 得 更 好 ， 而 且 
我 们 将 能 为 DTRT 的 用 户 提 供 一 些 真 正 适 合 他 们 的 东西 。 

我 知道 全 民 媒 体 网 站 在 当今 如 火 如 茶 ， 然 而 随 之 而 来 的 那些 功能 ， 如 交 
友 、 评 分 、 投 票 、 评 论 等 等 都 需要 仔细 周全 地 考虑 ， 而 不 要 随便 就 把 它 
们 像 大 杂烩 一 样 扔 进 社 区 网 站 。 这 对 于 Ajax, DHTML, Adobe Flash 以 
及 其 他 热 漳 都 是 一 样 。 


不 要 随便 就 被 热潮 牵 着 走 。 请 三 思 而 后 行 。 
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显而易见 的 博客 


即将 展现 给 你 们 的 这 个 博客 模板 ， 并 不 是 为 某 个 
上 ， 我 没有 使 用 设计 软件 ， 没 有 月 














在 开始 设计 时 ， 我 连 具 
故事 是 这 样 的 。 
























































体 的 想法 都 没有 。 
































具体 客户 创建 的 。 实 际 
日 白板 或 黑板 ， 也 没 用 到 笔 和 纸 。 其 至 





2007 年 7 H, RE WordCamp "做 了 一 次 演讲 。 那 次 是 由 WordPress 的 开 
很 多 WordPress 的 博 主 聚集 一 堂 ， 在 


发 商 Automattic 主办 的 一 次 年 会 ， 
两 天 的 时 间 里 以 博客 为 主题 进行 探讨 。 
抵达 时 ， 我 已 经 准备 好 了 演讲 的 内 容 ， 主 要 基于 我 写 的 Designing the 
Obvious 那 本 书 。 之 前 我 参加 过 好 几 次 类 似 的 演讲 ， 对 自己 要 说 的 内 容 








相当 自信 ， 而 且 已 经 修改 了 幻灯 片 的 内 容 ， 把 





























E 点 更 多 地 放 在 了 博客 上 。 


所 以 我 认为 这 个 一 定 能 满足 听众 。 但 是 在 会 场 看 了 几 个 演讲 之 后 ， 我 意 


识 到 这 些 听 众 可 能 不 会 


太 关 心 我 准 























的 那些 Web 应 用 设计 的 指导 原则 。 


我 即将 在 三 百 多 人 面前 站 起 来 ， 然 后 被 炸 成 碎片 。 而 现在 还 有 大 约 1 个 


小 时 来 避免 这 个 迫近 的 





危机 。 


我 溜 出 大 厅 跑 到 了 休息 室 ， 打 开 了 笔记 本 ， 人 快速 地 细 读 了 一 遍 自 己 的 弥 


AH. 


我 做 了 一 点 改动 ， 然 后 绝望 地 试图 劝 服 自己 一 定 能 侥幸 成 功 。 








CD WordCamp 是 一 种 非 

















章 )。 这 种 会 议 由 该 和 

















对 该 软件 的 各 个 方面 





的 网 址 为 http://central.wordcamp.org/。 一 一 译 者 注 


进行 探讨 ， 并 














正式 的 会 议 ， 主 题 聚 焦 于 博客 在 线 软件 WordPress URBS 1 


次 件 的 用 户 (或 者 说 博 主 ) 自主 发 起 ， 可 以 和 开 


发 人 员 共 同 针 











把 会 议 概况 发 布 到 WordCamp H 








HP. WordCamp 
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我 在 骗 谁 呢 ? 


我 关闭 了 幻灯 片 ， 打 开 了 文本 编辑 程序 ， 开 始 记 下 一 些 笔 记 ， 内 容 是 如 
何 才能 做 好 一 个 博客 设计 。 


大 约 30 分 钟 后 ， 我 走 上 讲台 ， 告 诉 不 停 了 矣 品 的 听众 我 扔 掉 了 自己 的 讲 
稿 ， 也 不 会 给 他 们 展示 什么 幻灯 片 。 听 众 鼓 起 掌 来 ， 很 明显 没 人 喜欢 纪 
灯 片 。 


在 后 面 的 1 个 小 时 ， 我 引领 了 一 场 关于 什么 才 是 优秀 博客 设计 的 讨论 ， 
而 不 是 演讲 。 我 论述 了 一 些 自己 书 里 面 的 原则 ， 然 后 提出 了 一 些 开放 式 
问题 ， 范 围 集中 在 如 何 把 这 些 原 则 应 用 到 博客 设计 里 面 去 ， 以 及 怎样 在 
这 些 想法 的 基础 上 再 更 进一步 。 


幸运 的 是 ， 听 众 跟 上 了 我 的 步调 。 他 们 声音 很 大 ， 而 且 投 入 、 积 极 、 情 

绪 高 涨 。 他 们 喊 出 了 不 少 好 主意 。 他 们 在 整个 大 厅 里 争论 。 他 们 简直 令 

人 惊异 ! 

讨论 时 ， 我 用 脑子 记 下 了 大 家 共同 认可 的 每 一 条 。 演 讲 的 最 后 ， 我 把 所 

有 这 些 意见 总 结 出 来 ， 最 后 一 次 引用 了 我 的 书 ， 终 于 安然 无 盖 地 走 下 了 

讲台 。 

几 个 小 时 后 ， 我 打开 了 OmniGraftle 创建 了 一 个 基于 刚才 讨论 的 线 框图 。 
022.1 通 往 更 好 的 博客 的 三 条 路 

那 次 讨论 中 主要 得 出 了 3 个 主要 结论 。 

首先 ， 我 们 认为 (或 者 说 意识 到 ) 博客 应 该 便于 浏览 者 扫描 页 面 ， 以 决 

定 某 篇 日 志 是 否 值得 阅读 。 

报纸 上 的 文章 在 最 开始 的 几 句 话 中 都 会 展露 出 高 浓度 的 信息 ， 以 此 告诉 

阅读 者 这 是 一 个 关于 什么 的 故事 。 人 然而 博客 并 不 都 有 新 闻 记 载 那 种 特色 ， 

因此 它们 很 少 提供 能 概括 全 文大 意 的 开篇 陈述 。 但 当 访 问 某 个 博客 时 ， 

这 正 是 我 们 最 先 想 看 到 的 。 

其 次 ， 我 们 认为 博客 应 当 能 更 好 地 鼓励 交流 。 绝 大 多 数 博 客 都 为 用 户 提 

供 了 添加 评论 的 功能 ， 但 我 们 相信 除了 简单 的 日 志 评 论 之 外 ， 还 能 够 激 

发 更 多 地 交流 。 
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最 显而易见 的 办 法 就 是 提供 Trackback (引用 通告 ) "。 正 如 你 可 能 已 经 
知道 的 ，Trackback 就 是 在 日 志 页 面 中 出 现 的 某 些 摘录 ， 来 自 于 与 该 日 志 
相关 的 其 他 网 站 。 但 问题 是 只 有 很 少 一 部 分 博客 解释 了 什么 是 Trackback 
或 者 它 是 如 何 工作 的 。 而 如 果 只 有 那些 知道 它 的 博 主 才 会 使 用 这 种 技术 ， 
那么 多 网 站 间 无 限 互联 的 可 能 性 就 变 得 微乎其微 了 。 


最 后 ， 我 们 认为 好 的 博客 设计 应 该 能 够 诱 使 人 们 阅读 更 多 其 他 的 日 志 。 
因为 访问 某 个 网 站 阅读 某 篇 博客 日 志 时 ， 我 们 通常 在 该 网 站 上 停留 的 时 
间 仪 限于 阅读 那 一 篇 日 志 。 我 们 不 会 继续 逗留 去 更 多 地 了 解 提 供 这 篇 日 
志 的 网 站 、 作 者 或 组 织 。 

来 自 听 众 的 建议 包括 提供 链接 指向 相关 日 志 、 最 受 欢迎 日 志 ， 以 及 其 他 等 等 
日 志 分 类 。 同 时 也 应 该 有 链接 指向 前 一 篇 和 后 一 篇 日 志 〔 如 果 适 当 的 话 )。 
另 一 个 解决 方案 是 提供 RSS 的 Feed。 而 由 于 大 多 数 人 都 不 知道 RSS 是 什 
么 ， 或 者 能 为 自己 做 什么 ， 所 以 指向 Feed 的 链接 应 该 添加 说 明 并 且 使 用 
易于 理解 的 文字 。 

而 正如 我 在 Designing the Obvious 中 所 论述 的 ，RSS 的 订阅 页 面 中 应 当 包 
FE RSS 的 简短 说 明 、 提 供 几 个 RSS 阅读 器 程序 的 链接 ， 并 且 应 该 有 像样 
的 格式 ， 而 不 是 一 整 页 密密麻麻 的 XML. 

当然 ， 我 们 也 认为 博客 中 应 当 包 括 所 有 那些 常规 的 内 容 ， 例 如 作者 名 
(如 果 该 博客 有 多 位 投稿 人 )、 日 志 发 表 日 期 、 指 向 网 站 其 他 部 分 的 链接 、 
搜索 栏 ， 以 及 其 他 通用 元 素 。 


22.1.1 解决 方案 
我 们 讨论 的 最 终结 果 正 如 图 22-1 所 示 。 
















































































(D Trackback 是 一 种 网 络 日 志 应 用 工具 ， 它 可 以 让 博 主 知道 自己 日 志 的 读者 中 有 哪 
些 人 撰写 了 与 之 相关 的 文章 ， 实 现 了 网 站 之 间 的 互相 通告 。 其 规范 由 Six Apart 在 
2000 年 制订 ， 并 在 Movable Type2.2 中 予以 实现 。 这 种 功能 的 意义 在 于 ， 博 主 可 

以 脱离 只 能 在 对 方 博客 中 发 布 评论 的 方式 ， 而 在 自己 的 博客 中 发 表 对 该 日 志 的 评 

论 。 而 通过 Trackback 的 引用 通告 形式 ， 被 评论 者 的 该 日 志 下 方 将 出 现 该 评论 的 链 

党， 从 而 在 双方 彼此 的 日 志 中 都 能 得 到 体现 。 这 种 评论 方式 使 得 评论 的 发 表 者 既 

能 通知 被 评论 者 ， 又 能 随时 维护 自己 的 评论 并 且 随 时 得 知 其 他 浏览 者 如 何 看 待 自 

己 的 评论 ， 同 时 还 能 通过 通告 吸引 更 多 的 浏览 者 到 自己 的 网 站 来 。 如 果 博 客 有 了 

Trackback 功能 ， 那 么 任何 人 都 可 以 通过 Trackback 来 发 表意 见 和 评论 ， 所 有 的 评论 

都 能 追根 溯源 ， 从 而 在 因特网 上 相互 联接 而 织 成 一 张大 网 。 译 者 注 
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The Obvious Blog 


Short blog description goes here to provide context to 
users who land on this page and have no idea what 








they're looking at. 
A provocative post title goes here 
Short summary of this post, so users can 
quickly determine if it's worth reading. Next post 
In this site Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Some eost wie 
Main nav ins Amet conssctoter adpiscng eit Phaselus m aru. Ce | Eraviou paat 
Main nav in sem uma, gravida eget, facilisis a. vulputate eget, arcu. 
Main nains Quisque mi diam, cursus a, dapibus non, ormare nec, mi. 
Meanw is Fusce et nunc vitae mi porta imperdiet. Etiam non auam. 


Pellentesque tortor. Duis vestibulum velit et lectus. Eñam 
aliquet semper sapien. Class aptent taciti sociosqu ad pora Categories 


Related Current category 
poss Vivamus faucibus. Proin ante libero, auctor a, accumsan sit — Category link. 
Related post link amet, sollicitudin eget, massa. Praesent diam. Suspendisse Category link 
interdum eleifend odio. Nulla nec arcu. Sed tincidunt presum Categorias 
[--— pont k orei Cra justo ndi cube lacinia, vüpuate in, suem | Gataoory inie 
vel, telis. Sed sit amet nisl. Duis commodo nonummy est. In 
Related post ine posuere elit at turpis. Praesent euismod aliquam nulla, Category link 
Praesent dictum, orci sit amet sagitis euismod, lacus ^ Category lin. 
mauris pulvinar ligula, vel lacinia diam nulla vitae turpis. — Category lin 
Nulla est nulla, sollicitudin ut, vulputate a, nonummy sit 
Popular posts. amet, risus. Sed dolor nisl, pretium sit amet, placerat eget, 
rutrum vitae, justo. Pellentesque turpis lectus, varius at. 
Popular post link sodales ac, rutrum vel, metus. Phasellus sed metus. Nulla 
Popular posi link rutrum quam in velit Mauris et enim in ipsum congue 
Popular pos link ultrices. Suspendisse eget turpis. 
Popular post linis 
Posted by Robert on October 3, 2007 
What others sites are saying 
Link to tho  addross from your own sito, and this 
Eel your page 
From somedomain.com; 


"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Maecenas vulputate sodales dolor." 


"Lorem ipsum dolor sit amet. consectetuer adipiscing elit. 
Maecenas vulputate sodales dolor." 


3 comments (Subscribe to comments) 
Someone said: 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Maecenas vulputate sodales dolor. Lorem ipsum dolor sit 
amet. consectetuer adipiscing elit. Phasellus in arcu. Cras 
sem urna, gravida eget, facilisis a, vulputate eget, arcu. 
Quisque mi diam. cursus a, dapibus non. ornare nec, mi. 


Fusce et nunc vitae mi porta imperdiet. Etiam non quam. 
Pellentesque tortor. Duis vestibulum velit et lectus. 


Someone said: 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Maecenas vulputate sodales dolor. 


Someone said: 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 

Maecenas vulputate sodales dolor. Lorem ipsum dolor sit 

ns Aid Cras 
uma, gravida eget, facilisis a, vulputate eget, arcu. 

Quisque mi dam. cursus a, dapibus! 


Add a comment 














图 22-1 


160 第 22 章 显而易见 的 博客 


见 图 22-2， 在 页 面 项 部 有 清晰 的 网 站 标题 ， 紧 随 其 后 的 是 一 段 概要 。 这 
样 可 以 让 用 户 很 快 地 洞察 这 个 站 点 是 关于 什么 方面 的 ， 并 且 能 预料 到 从 
中 将 会 得 到 什么 。 

















The Obvious Blog 


Short blog description goes here to provide context to 
Users who land on this page and have no idea what 


they're looking at. 
| A provocative post title goes here 
CSearch ) Short summary of this post, so users can 
quickly determine if it's worth reading. Next post 
In this site Some pos: ite 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Sinnanann miminta andaian dnine. i aanm inna nlar si 





图 22-2 


它 的 下 方 是 日 志 的 标题 。 标 题 使 用 了 很 大 的 Serif GTR) 字体 以 区 别 于 
日 志 正 文 所 使 用 的 Sans Serif (无 衬 线 ) 小 字体 "。( 这 是 报纸 和 网 站 中 常 
用 的 伎俩 ， 用 于 在 视觉 上 将 标题 和 正文 区 分 开 来 。) 


因为 日 志 的 标题 通常 不 会 展现 出 内 文 的 主题 (事实 上 越 是 怪异 离奇 的 标 
题 才 越 有 意思 )， 我 们 在 标题 的 下 方 放 上 了 一 段 简 短 的 内 容 概要 。 现 在 用 
户 可 以 通过 一 段 简单 的 摘录 决定 这 篇 日 志 是 否 值得 读 下 去 。 

然后 ， 训 无 疑问 就 是 日 志 本 身 ， 而 其 后 显示 了 作者 的 名 字 和 发 布 日 期 。 

下 一 个 部 分 的 标题 是 “What Other Sites Are Saying”， 见 图 22-3。 这 个 部 
分 显示 了 Trackback 的 摘录 ， 除 了 通过 某 种 方式 向 用 户 解释 了 这 些 摘录 是 
从 哪里 来 以 外 ， 同 时 还 说 明了 如 何 创 建 Trackback， 以 及 它 的 工作 原理 。 
它 只 是 这 么 一 句 话 : 

在 你 自己 的 站 点 链接 以 下 地 址 ， 这 个 页 面 就 会 列 出 你 的 文 草 : http://www. 
mydomain.com/post/trackback ”。 





































































































中 在 西方 国家 罗马 字母 的 字体 分 为 两 大 种 类 : Sans Serif 和 Serif. Serif 字体 在 字 的 笔 
画 开 始 及 结束 的 地 方 有 额外 的 装饰 ， 而 且 笔 画 的 粗细 会 因 横 直 的 不 同 而 有 区 别 。 相 
反 的 ，Sans Serif 字体 则 没有 这 些 额 外 的 装饰 ， 笔 画 粗细 大 致 差不多 。 常 见 的 Times 
New Roman 等 就 属于 Serif 字体 ， 而 Arial、Tahoma 等 则 属于 Sans Serif 字体 。 中 文 
字体 也 同样 如 此 ， 宋 体 、 细 明 体 〈 繁 体 中 常用 ) 等 属于 Serif， 而 黑体 、 幼 圆 等 则 属 
于 Sans Serif。 一 一 译 者 注 
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What others sites are saying 


Link to the following address from your own site, and this page 
whl list your article: htlp/www.mydomain.com/posttrackback 


From somedomain.com: 


"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Maecenas vulputate sodales dolor." 


"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Maecenas vulputate sodales dolor." 





图 22-3 


有 了 这 段 说 明 ， 用 户 就 能 很 容易 地 知道 在 自己 网 站 写 的 日 志 是 如 何在 当 
前 页 面 显示 摘录 的 。 让 事情 变 得 简单 将 能 鼓励 用 户 去 尝试 ， 这 不 仅 辟 励 
了 多 网 站 之 间 的 互联 (比如 说 ， 某 人 写 了 一 篇 博客 日 志 回 应 你 的 日 志 )， 
同时 还 增加 了 你 自己 网 站 的 访问 量 ， 因 为 在 其 他 网 站 阅读 日 志 的 人 有 可 
能 会 点 击 Trackback 过 来 看 你 的 文章 。 


同样 地 ， 每 一 个 Trackback 的 摘录 都 会 指向 其 原文 所 在 的 站 点 ， 因 此 用 户 
可 以 点 击 去 看 那些 日 志 ， 从 而 能 够 对 主题 了 解 得 更 多 ， 或 者 看 看 其 他 人 
的 看 法 。 


再 后 面 就 是 评论 部 分 ， 见 图 22-4。 标 题 中 显示 了 评论 的 数量 。 这 个 地 方 
同时 还 提供 了 一 个 链接 以 便 订阅 所 有 的 评论 (很 常见 的 情况 ， 在 对 某 篇 
日 志 发 表 评论 之 后 ， 我 们 和 希望 能 看 到 其 他 人 的 反应 ， 但 总 是 忘记 回来 查 
看 。 而 如 果 用 RSS 订阅 了 评论 ， 任 何 时 候 打 开 RSS 阅读 器 你 都 能 获得 最 
新 的 评论 )。 


最 后 是 一 个 简短 的 表单 ， 让 用 户 发 表 评 论 。 人们 之 间 的 交流 只 需 一 点 必 
需 的 信息 一 一 你 的 名 字 和 网 址 〈 选 填 项 )。 你 的 名 字 将 会 显示 在 你 的 评论 
上 方 ， 而 且 它 还 能 指向 你 的 个 人 网 站 ， 如 果 你 有 的 话 。 这 意味 着 写 点 评 
论 就 能 够 增加 你 自己 网 站 的 访问 量 ， 这 也 更 加 鼓励 了 人 们 交流 。 

让 表单 尽 可 能 地 短小 简练 将 有 助 于 人 们 主动 地 发 表 评 论 。 如 果 这 件 事 很 
简单 又 很 有 价值 ， 那 么 我 们 就 会 去 做 。 而 且 短 小 的 表单 将 使 这 个 决定 更 
加 容易 。 
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3 comments (Subscribe to comments) 
Someone said: 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Maecenas vulputate sodales dolor. Lorem ipsum dolor sit 
amet, consectetuer adipiscing elit. Phasellus in arcu. Cras 
sem urna, gravida eget, facilisis a, vulputate eget, arcu. 
Quisque mi diam, cursus 3, dapibus non, ornare nec, mi, 
Fusce et nunc vitae mi porta imperdiet. Etiam non quam. 
Pellentesque tortor. Duis vestibulum velit et lectus. 


Someone said: 





Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Maecenas vulputate sodales dolor. 


Someone said: 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
Maecenas vulputate sodales dolor. Lorem ipsum dolor sit 
amet, consectetuer adipiscing elit. Phasellus in arcu. Cras 


sem uma, gravida eget, facilisis a, vulputate eget, arcu. 
Quisque mi diam. cursus a, dapibus! 


Add a comment 
Name: 


LDL |] 


Your web site (optional): 


Message: 





图 22-4 


左 侧 的 工具 栏 中 有 一 个 搜索 栏 ， 如 图 22-5 所 示 。 其 后 是 几 个 链接 模块 ， 
分 别 指向 网 站 其 他 栏目 、 相 关 的 日 志 ， 以 及 最 受 欢迎 日 志 。 这 些 链 接 列 
表 将 鼓励 用 户 阅 读 网 站 中 的 其 他 日 志 。 而 更 进一步 ， 页 面 右 侧 的 模块 提 
供 了 指向 其 他 日 志 分 类 的 链接 ， 见 图 22-6. 


右 侧 工具 栏 还 提供 了 指向 前 一 篇 和 后 一 篇 日 志 的 链接 ， 每 一 个 都 被 清晰 
地 标示 出 来 。 


最 后 ， 右 侧 工具 栏 的 顶部 还 提供 了 一 个 大 的 Subscribe (订阅 ) 按钮 。 通 
俗 易 懂 的 术语 和 便于 点 击 的 按钮 将 会 鼓励 用 户 订阅 RSS Feed， 至 少 也 能 
通过 RSS 订阅 页 面 上 的 信息 进一步 地 了 解 RSS. 
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In this site 


Mai à 
Main nav link 





Main nav link 





Related posts 
Related post link 
Related post link 
Related post link 











Related post link 











图 22-5 
22.1.2. ” 别 跟着 傻瓜 上 路 


令 人 悲哀 的 是 ， 到 写 这 一 章 为 止 ， 连 我 自己 的 博客 都 还 没 能 做 出 相应 的 
修改 。 我 能 有 什么 资格 告诉 你 们 这 人 么 做 才 是 对 的 呢 ? 不过， 尽管 在 开始 
设计 这 个 博客 模板 时 我 没有 使 用 任何 设计 工具 ， 但 仍然 有 相当 令 人 称奇 
的 地 方 : 300 个 博客 的 狂热 分 子 。 


而 本 章 所 讨论 的 设计 都 是 他 们 认为 应 该 做 到 的 。 


合作 化 和 职业 化 的 博客 行为 仍然 是 一 个 相当 新 的 想法 ， 但 是 用 诚 展 、 真 
实 的 声音 与 客户 对 话 ， 将 能 快速 地 增加 你 的 吸引 力 。 这 是 接近 受众 想法 
和 观念 最 好 的 办 法 之 一 ， 而 且 能 够 提高 宝贵 的 用 户 忠 诚 度 ， 就 像 Apple、 
Google fil 37Signals 那些 公司 一 样 。 
为 自己 的 博客 设计 多 付出 一 些 努 力 ， 那 么 你 和 用 户 间 沟通 的 能 力 将 有 显 
著 的 不 同 。 通 过 Trackback 和 评论 来 鼓励 交流 、 为 博客 日 志 撰 写 概 要 、 为 
相关 内 容 提供 链接 ， 这 些 都 是 很 保险 的 方法 ， 不 仅 能 改善 你 的 博客 ， 同 
时 也 会 为 你 带 来 忠诚 的 用 户 。 


在 接 下 来 几 天 里 ， 我 希望 能 有 时 间 把 这 些 点 子 应 用 到 自己 的 博客 里 面 去 。 
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本 章 我 的 观点 并 不 是 出 自 于 某 一 个 项 目 。 实 际 上 ， 它 们 来 自 于 我 曾 从 事 
的 与 洲 请 用 户 添加 回复 、 扎 写 评论 或 者 在 论坛 中 参加 讨论 相关 的 几乎 每 


一 个 项 目 。 























每 当 经 手 类 似 的 项 目 ， 我 总 是 会 被 问 到 同样 的 问题 。 差 不 多 就 好 像 这 样 : 


| “我 们 正在 考虑 是 否 应 该 对 评论 加 以 控制 。 你 对 这 件 事 看 法 如 
何 ? ” 





也 许 你 已 经 猪 到 了 ， 隐 藏 在 这 个 问题 背后 的 驱动 因素 其 实 就 是 么 惯 。 


对 于 由 用 户 自 行 发 表 的 评论 ， 他 们 怒 慨 有 人 可 能 会 说 一 些 对 网 站 不 利 的 
坏话 ， 害 怕 有 人 会 冒犯 其 他 用 户 ， 还 担心 自己 的 员工 可 能 会 忘记 检查 评 
论 而 没有 确保 让 每 个 人 都 玩 得 开心 。 


而 在 这 些 背 后 ， 他 们 又 恐 惯 自己 的 员工 将 不 得 不 把 每 天 的 时 间 都 浪费 在 
可 笑 的 看 管 和 删除 评论 上 。 


下 次 如 果 有 人 再 问 我 这 个 问题 ， 我 准备 让 他 们 看 看 这 一 音 ， 因 为 我 一 直 
秉承 如 下 的 观点 。 


C23.1 让 你 的 顾客 发 表意 见 


一 句 话 ， 不 要 控制 任何 东西 。 


不 要 控制 留言 、 评 论 、 论 坛 回复 ， 或 者 其 他 相关 的 任何 东西 。 为 什么 
呢 ? 因为 控制 将 会 带 来 严重 的 负面 效果 。 


它 会 让 客户 觉得 你 在 隐瞒 着 什么 东西 。 
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比如 次 ， 为 某 个 产品 写 评论 时 ， 我 们 相信 自己 是 以 茶 种 方式 在 帮助 其 他 
可 能 的 消费 者 决定 是 否 应 该 购买 这 个 产品 。 否 则 我 们 为 什么 要 写 评论 ? 


因此 ， 如 采 我 们 想 说 的 是 好 话 ， 就 表示 我 们 很 高 兴 ， 欣 然 愿意 为 这 个 产 
品 做 宣传 ， 而 这 也 正 是 生产 该 产品 的 公司 所 希望 的 。 很 明显 ， 这 对 那 家 
公司 来 说 是 件 好 事 。 

但 是 ， 如 果 我 们 有 些 负面 的 话 想 说 ， 表 示 正 在 试图 用 自己 的 遭遇 来 警告 
其 他 用 户 。 此 举 并 不 总 是 带 有 恶意 。 最 常见 的 ， 我 们 只 是 想 把 使 用 中 遇 
到 的 问题 和 困难 说 出 来 ， 让 其 他 人 能 事先 知道 ， 而 不 会 因为 遇 到 同样 的 
事情 而 惊讶 。 是 的 ， 有 些 时 候 我 们 也 会 想 要 挥 着 小 红旗 指挥 人 们 尽 可 能 
地 远离 某 个 产品 ， 但 总 的 来 说 ， 绝 大 部 分 产品 还 没有 差劲 到 如 此 地 步 。 


如 果 我 们 写 了 这 种 警告 性 的 文章 ， 然 后 被 告知 这 些 评 论 需 要 先 通 过 审查 
才能 发 表 出 来 ， 我 们 就 很 有 可 能 会 对 该 网 站 丧失 一 部 分 信任 感 。 不 管 是 
有 意 还 是 无 意 ， 我 们 都 会 猜测 是 否 文章 在 发 表 之 前 就 会 被 强大 的 审查 者 
枪 比 挤 。 而 且说 实话 ， 因 为 忙碌 的 生活 ， 我 们 并 不 一 定 很 想 回 到 网 站 去 
检查 自己 的 评论 是 否 能 发 表 。 如 果 当 时 不 能 看 到 结果 ， 我 们 的 兴趣 也 就 
WRT. 当然 ， 如 果 我 们 真 的 有 很 难听 的 话 想 说 ， 可 能 会 强制 自己 回来 
检查 ， 以 便 确 定 那些 讨厌 的 审查 者 是 否 通过 了 评论 。) 


而 除了 我 们 因为 种 种 怀疑 而 感到 受 了 胁迫 之 外 ， 生 产 该 产品 的 公司 几乎 
什么 都 没 得 到 。 


事实 上 ， 员 工 们 每 天 花费 宝贵 的 数 分 钟 或 数 小 时 来 管理 这 些 评论 ， 而 公 
司 实际 上 在 付 钱 抛洒 自己 消费 者 的 信任 。 


23.1.1 一 个 关于 信任 的 问题 
有 一 些 很 好 的 理由 可 以 让 你 完全 不 再 思考 评论 的 问题 。 


首先 ， 让 你 的 顾客 自由 发 表意 见 以 表示 你 信任 他 们 的 谈论 。 他 们 称赞 时 ， 
你 放手 让 他 们 去 宣传 ， 他 们 说 了 不 好 听 的 话 时 ， 你 也 相信 和 他们 的 看 法 有 
一 定 意 义 。 而 正如 我 们 都 知道 的 ， 信 任 才 是 建立 所 有 成 功 关 系 的 基石 。 


其 次 ， 这 表示 你 信任 用 户 自 身 的 判断 能 力 。 不 去 防范 每 一 条 负面 评论 或 
者 论坛 争论 ， 你 相信 用 户 会 运用 他 们 自身 的 才智 、 常 识 和 经 验 过 滤 纯 负 
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面 的 内 容 ， 在 字里行间 寻求 信息 ， 然 后 得 出 结论 。 


换 名 话说， 给 用 户 自 己 做 判断 的 权利 ， 而 他 们 上 自然 会 忽略 那些 无 用 的 评 


论 。 


如 果 这 些 理由 还 不 够 ， 你 还 可 以 通过 这 种 方式 让 那些 未 经 过 滤 的 声音 为 
自己 所 用 ， 也 就 是 招募 自己 的 Otaku. 


23.1.2 ”起 用 你 的 Otaku 


正如 Wikipedia (维基 百科 ) 所 描述 的 ，Otaku 是 一 个 术语 ， 用 于 形容 那 
些 “对 某 些 领域 有 着 痴迷 热情 的 狂热 者 " (这 个 术语 本 来 主要 用 于 形容 
热衷 于 日 本 动漫 的 人 ， 然 而 自从 营销 大 师 Seth Godin 在 一 次 演讲 中 提 到 
这 个 词 后 就 被 广泛 引用 开 来 )。 

那些 抱怨 声 最 大 的 人 、 欢 呼 得 最 热烈 的 人 、 当 有 人 需要 解答 问题 时 尽 自 
己 最 大 帮助 的 人 ， 还 有 总 是 在 你 身边 告诉 你 他 们 正在 想 什么 的 人 ， 这 些 
人 就 是 你 的 Otaku。 而 你 可 以 让 他 们 帮助 你 。 


让 顾客 们 公开 地 抱怨 你 的 产品 、 在 论坛 里 表达 他 们 的 诅 形 ， 或 者 征讨 公 
司 发 表 的 言论 。 通 过 这 些 你 便 拥 有 发 现 人 们 真实 想法 的 能 力 。 而 任何 一 
个 不 受 约束 的 看 法 都 比 黄金 还 值钱 。 


首先 ， 满 怀 激 情 地 异 恶 也 比 训 不 关心 的 冷漠 要 好 得 多 。 那 些 最 恨 你 的 人 ， 
在 你 真正 开始 为 他 们 考虑 的 那 一 刻 ， 往 往 会 转变 成 最 坚定 的 拥护 者 。 如 
果 你 能 做 到 这 一 点 ， 那 么 就 能 少 一 个 曾经 的 叫嚣 者， 而 多 一 个 终生 的 朋 
友 。 

其 次 ， 你 还 可 以 通过 组 织 手段 重 塑 顾客 体验 。 比 如 说 ， 你 可 以 联系 那些 


喜欢 到 处 宣扬 的 不 安 份 分 子 ， 表 示 你 非常 感谢 他 们 提供 的 反馈 以 及 专业 
意见 ， 然 后 邀请 他 们 加 入 志愿 者 团队 ， 在 论坛 里 帮助 其 他 用 户 回 答 问题 。 









































(D Otaku (3372 L) 一 词 原 指 动漫 与 游戏 的 爱好 者 ， 即 “ 御 宅 族 ”。 现 今 该 词 也 可 用 于 
指称 其 他 方面 的 狂热 者 ， 或 对 某 种 领域 具有 和 较 深 造 证 的 人 尤其 是 较 特 殊 的 领域 )， 

如 “军事 御 宅 ”等 。 在 中 国 网 络 流行 用 语 中 有 许多 运用 “ 宅 ” 字 自 创 的 词汇 ， 如 

“ 宅 人 六 “宅男 〈 女 )” 不 过 多 半 已 经 与 御 宅 族 的 本 质 无 关 而 沦 为 戏 庆 他 人 的 莽 称 。 
一 一 译 者 注 
(2) Seth Godin (ZEH e IT) 是 20 世纪 90 年 代 后 期 以 来 一 系列 商业 领域 专著 的 作者 ， 
也 是 一 位 演讲 家 。 其 第 一 部 畅销 书 是 关于 特许 营销 (permission marketing) 的 著作 。 
一 一 译 者 注 
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作为 交换 条 件 ， 你 可 以 为 他 们 签署 同意 书 支 付 一 些 酬 劳 ， 给 他 们 与 内 部 
员工 直接 交流 的 机 会 ， 赠 送 工 恤 或 棒球 帽 之 类 的 免费 礼品 ， 甚 至 造势 让 
他 们 成 为 网 站 里 的 交际 明星 。 


举 个 例子 ，Adobe 公司 推广 过 一 项 名 为 Adobe Community Experts 
(Adobe 社交 专家 ,简称 ACE)〉 的 计划 ”， 目 的 是 为 了 奖励 积极 支持 
Adobe 产品 的 社区 活跃 分 子 。( 这 些 人 不 仅仅 只 是 参与 论坛 讨论 ， 他 们 可 
能 还 发 表 过 文章 、 出 版 过 书籍 或 者 做 过 以 Adobe 为 主题 的 演讲 等 等 。4) 入 
选 者 的 个 人 简介 将 会 在 Adobe.com 上 公布 ， 同 时 还 得 到 特制 的 证 书 图 片 ， 
以 便 能 在 个 人 网 站 上 发 布 ， 证 明 自 己 获得 了 Adobe 公司 高 度 的 信赖 和 重 
视 。 这 些 入 选 者 还 将 受到 Adobe 职员 的 款待 ， 得 到 很 多 内 幕 消 息 ， 并 且 
能 与 Adobe 开发 团队 直接 地 沟通 。 


Adobe 公司 并 没有 为 这 些 人 支付 酬劳 。ACE 的 成 员 都 是 专家 级 的 志愿 者 。 
从 这 方面 来 看 ， 他 们 可 能 也 是 Adobe 最 好 的 一 个 拥护 者 群体 了 。ACE 写 
文章 ， 在 会 议 或 者 用 户 集会 上 讲话 ， 还 在 论坛 里 帮 人 们 解决 问题 。 


而 这 件 事 的 背后 是 Adobe 为 自己 组 建 了 一 个 预备 役 。 这 些 人 整 天 挂 在 论 
坛 上 回答 问题 、 提 供 建 议 并 给 其 他 用 户 做 些 推 荐 。 有 些 人 可 能 认为 不 管 
理 留 言 表示 公司 对 论坛 不 够 重视 ， 而 其 他 用 户 也 不 会 理 昭 这 些 留言 。 但 
有 Otaku 团队 在 ， 他 们 会 解决 问题 。 他 们 活跃 在 Adobe 的 论坛 以 及 世界 
各 地 的 用 户 组 讨论 列表 中 ， 他 们 是 Adobe 的 客户 服务 第 一 线 的 重要 成 员 。 
Adobe 将 通过 ACE 获知 负面 评论 ， 同 时 也 能 看 到 高 度 赞扬 的 评论 。 


设想 一 下 。 如 果 你 的 公司 也 有 这 样 一 群 人 在 宣扬 你 的 Web 应 用 ， 同 时 在 
社区 里 帮助 你 解决 问题 ， 那 会 是 怎样 一 种 感觉 ? 而 且 ， 当 这 些 专 家 们 抱 
怨 时 ， 你 将 知道 那 肯定 不 会 是 无 移 之 谈 ， 而 当 他 们 吹捧 你 的 产品 时 ， 肯 
定 也 会 有 很 多 人 相信 他 们 的 选择 。 他 们 其 实 是 在 为 你 做 营销 。 

































































(D ACE 计划 的 对 象 是 积极 贡献 和 分 享 Adobe 产品 使 用 经 验 及 知识 的 Adobe 消费 者 。 
具体 来 说 ， 是 那些 积极 在 Adobe 论坛 帮助 其 他 用 户 ， 在 各 种 在 线 社 区 提供 Adobe f£ 
术 支 持 或 信息 ， 在 专业 出 版 物 中 发 表 文 章 ， 以 及 在 会 议和 用 户 组 中 进行 关于 Adobe 
产品 演讲 的 各 种 用 户 。 该 计划 网 址 为 http://www.adobe.com/communities/experts/。 

译 者 注 
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23.1.3 ”标记 那些 来 犯 者 

最 后 ， 为 了 消除 你 可 能 的 最 后 一 点 担心 ， 我 们 也 可 以 通过 “无 痛 ” 的 控 
制 方式 来 添加 一 点 功能 ， 提 升 一 些 安全 系数 :标记 系统 。 

在 每 一 篇 留言 、 回 复 、 论 坛 帖 子 、 日 志 评 论 旁边 加 一 个 小 小 的 “标记 ” 
图 标 。 这 些 图 标 可 以 点 击 ， 用 户 能 对 某 篇 评论 进行 标记 ， 通 知 公司 员工 
对 其 检查 。 

通过 这 种 方式 ， 当 某 个 无 赖 净 到 你 的 论坛 里 时 ， 其 他 人 就 可 以 告诉 你 他 
们 受到 了 打扰 ， 让 你 处 理 。 

这 个 “标记 ”图 标 将 用 户 引领 到 一 个 简单 的 表单 ， 他 们 可 以 写 下 为 什么 
这 条 评论 应 该 检查 。 不 多 不 少 ， 保 持 这 种 简单 。 而 且 ， 别 要 求 你 不 需要 
的 任何 东西 (例如 用 户 的 电子 邮件 地 址 ， 因 为 当 用 户 登录 时 你 已 经 得 到 
T). 


23.1.4 “为 他 们 让 路 


以 上 ， 我 的 朋友 们 ， 当 有 人 问 我 如 何 看 待 控制 评论 时 ， 我 回答 的 就 是 这 
些 内 容 。 一 字 不 差 。 


你 不 需要 控制 任何 东西 。 
打开 闸门 ， 让 你 的 用 户 自由 地 发 表意 见 。 为 他 们 让 路 。 


只 需 一 点 点 的 谦 插 和 一 点 点 的 驾驭 ， 你 就 能 把 自己 的 大 部 分 顾客 转变 成 
忠诚 而 又 活跃 的 追随 者 和 拥护 者 。 你 可 以 把 自己 的 恕 惧 转变 为 一 种 工具 ， 
以 它 作 为 驱动 力 来 收集 顾客 提供 的 信息 、 发 展 Otaku， 提 供出 众 的 客户 服 
务 ， 而 且 在 你 的 公司 和 用 户 之 间 建 立 起 一 种 相互 信任 的 文化 。 


而 这 些 为 你 万 得 的 回报 ， 将 会 远 远 超过 你 去 控制 它们 的 所 得 。 
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从 Amazon 到 Yahoo 再 到 Yelp 了”， 五 星 评 级 系统 随处 可 见 ， 但 是 各 自 执 
行 起 来 却 常常 有 所 差异 。 


比如 说 ， 它 们 经 常会 分 成 两 个 部 分 ， 并 显示 在 页 面 的 不 同 区 域 。 其 中 一 
部 分 是 展示 版 本 ， 它 告诉 用 户 现 在 已 有 的 评定 结果 。 男 一 部 分 则 是 编辑 
版 本 ， 用 户 可 以 在 那里 选择 自己 对 某 事 物 的 评分 ， 例 如 书籍 、 唱 片 或 者 
某 篇 文章 。 


















































在 这 些 评级 系统 中 ， 其 中 有 些 还 会 在 鼠标 悬 停 到 星星 上 时 显示 说 明 性 文 
本 ， 告 诉 用 户 每 颗 星 代表 的 等 级 。 有 些 系 统 需要 先 点 击 某 颗 星 然后 再 点 
Save 按钮 ， 有 些 则 只 需要 点 击 某 颗 星 。 











但 当 你 只 需要 点 击 茶 颗 星 时 ， 除 了 星星 从 白色 变 成 黄色 或 者 其 他 颜色 ) 
之 外 ， 你 无 法 得 到 系统 的 回馈 ， 也 就 是 说 你 感觉 不 到 交互 是 否 已 经 完成 。 
这 种 设计 让 用 户 (包括 我 在 内 ) 无 法 对 自己 的 操作 建立 信心 。 

这 些 都 是 每 当 我 要 设计 五 星 评级 系统 时 所 考虑 的 问题 。 

甚至 某 些 情况 下 ， 由 于 页 面 空 间 有 限 ， 我 还 需要 把 这 两 个 部 分 合 二 为 一 。 
我 需要 通过 某 种 方式 使 这 个 单独 的 界面 控件 里 既 能 显示 当前 的 等 级 情况 ， 
又 能 让 用 户 自己 评级 。 
下 面 将 展示 我 现在 是 如 何 做 的 ， 然 后 再 告诉 你 们 以 前 我 为 之 犯 过 的 错误 。 






























































(D Yelp 是 一 个 关于 旧金山 当地 商业 机 构 的 用 户 评述 汇总 网 站 ， 诞 生 于 2004 4E 10 月 。 
j 户 在 Yelp 上 给 当地 的 各 种 店铺 打分 留 评 语 ， 在 论坛 里 讨论 ， 也 能 通过 Yelp 在 本 
邮 找 到 衣食 住 行 的 各 种 信息 。 网 址 为 http:Wwww.yelp.com/。 一 一 译 者 注 



























































170 $243 得 到 一 个 好 的 评分 


C24.1 清晰 胜 于 效率 


为 了 把 展示 界面 和 编辑 界面 揉 合 到 一 起 ， 我 把 它们 分 成 了 两 个 部 分 : 一 
部 分 负责 显示 ， 另 一 部 分 负责 交互 。 最 开始 是 单纯 用 于 展示 的 五 颗 星 ， 
右 侧 则 是 局 动 评分 行为 的 链接 ， 如 图 24-1 所 示 。 


Y Y XE XY Bate this widget (Rated 14 times) | 


图 24-1 


为 了 让 用 户 能 选择 自己 的 评级 ， 在 他 们 单 击 Rate this widget (为 此 评分 ) 
链接 后 那 组 星星 将 进入 可 编辑 状态 ， 并 且 即 由 黄 变 日 。 


当然 ， 用 户 也 需要 保存 评分 结果 并 回 到 展示 状态 ， 因 此 Rate this widget 
链接 被 蔡 换 成 了 Save (保存 ) 和 Cancel (取消 ) 选项 ， 这 也 向 用 户 声明 
现在 可 以 编辑 了 。 见 图 24-2。 


用 户 单 击 Rate this widget 链接 ， 然 后 点 击 他 们 认为 合适 的 星星 来 评定 等 
2&. Fd 24-3 中 ， 用 户 的 评分 为 3 ME. 


www Sae ee www Save cmas | 
图 


图 24-2 k] 24-3 














在 这 里 ， 他 们 可 以 单 击 Save. Cancel 或 者 另 一 颗 星 。 让 我 们 假设 现在 该 
用 户 选 择 保存 自己 的 评分 〈 同 时 他 更 改 评分 为 四 星 ， 如 图 24-4 所 示 )。 


Yr Yi Bate this widget (Rated 15 times) | 


图 24-4 
保存 之 后 ， 系 统 将 计算 最 新 的 等 级 平均 值 ， 然 后 再 次 回 到 展示 状态 显示 


新 的 评定 结果 。 连 同 Saved! (已 保存 ! ) 的 文本 一 起 ， 这 将 通知 用 户 交 
互 已 经 完成 ， 同 时 他 的 评分 已 记录 在 案 。 在 展示 状态 下 他 们 也 能 更 改 评 
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分 ， 见 图 24-5 AMAY Change your rating (修改 你 的 评分 ) 链接 。 


Xr kk Saved! (Rated 15 times) Change your rating, | 


图 24-5 


我 在 Rate this widget 链接 后 面 还 加 了 一 点 文本 ， 显 示 已 有 多 少 位 用 户 进 
行 了 评分 : Rated 15 times. (共有 15 次 评分 ) (这 里 的 15 是 动态 取 值 )。 
这 不 仅 能 够 告诉 当前 用 户 自 己 所 做 评级 在 系统 中 所 占 的 百分比 ， 同 时 还 
回 他 们 证 实 自己 的 评级 结果 已 添加 《〈 很 明显 之 前 的 数字 应 该 是 14)。 


最 后 ， 在 交互 中 加 入 了 一 些 逻 辑 判 断 ， 以 防止 茶 位 用 户 为 单个 对 象 多 次 
评分 。 也 就 是 说 ， 如 果 他 在 日 后 又 评选 了 另 一 个 等 级 ， 平 均值 将 会 更 新 ， 
但 是 评分 者 的 个 数 不 会 改变 。 


将 展示 和 编辑 版 本 合 为 一 个 评级 系统 ， 有 好 处 也 有 坏处 。 


从 好 处 来 说 ， 它 占 的 位 置 比 两 部 分 分 开 的 版 本 要 少 ， 因 为 你 只 需 在 页 面 
上 找 一 小 处 地 方 来 放置 它 就 行 了 。 


而 不 好 的 地 方 在 于 ， 这 种 设计 中 完成 交互 所 需 的 步骤 比 其 他 设计 要 多 。 
但 关键 是 这 种 设计 中 交互 的 每 一 个 步骤 都 非常 清楚 、 直 接 。 


就 像 刚才 所 说 的 ， 两 部 分 的 版 本 可 以 简单 到 只 需要 点 击 某 颗 星 而 已 ， 但 
是 系统 无 法 提供 反馈 ， 你 无 法 知道 自己 的 评分 是 否 被 保存 ， 或 者 是 否 有 
效 。 将 两 个 功能 结合 在 一 起 意味 着 你 的 每 一 步 都 能 得 到 一 个 清晰 的 结 


单 击 Rate this widget， 界 面 将 进入 可 编辑 状态 。 点 击 某 颗 星 将 把 它 变 成 黄 
色 。 单 击 Save 让 你 知道 自己 的 评级 结果 已 被 保存 ， 等 级 平均 值 和 评级 总 
人 数 都 将 会 更 新 。 

现在 的 交互 确实 需要 更 多 的 步骤 ， 但 是 它 做 得 更 好 的 地 方 在 于 提供 了 适 
当 的 反馈 ， 所 以 用 户 能 在 与 该 系统 交互 的 每 一 个 瞬间 都 保持 自信 ， 并 且 
每 一 步 都 很 清晰 。 

换 名 话说， 效率 并 不 一 定 是 所 有 问题 的 答案 。 我 们 在 第 16 章 看 过 那个 保 
险 公 司 的 案例 ， 最 短 的 并 不 一 定 就 是 最 好 的 。 
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比 效率 更 重要 的 是 清晰 。 对 于 那些 第 一 次 来 到 网 站 ,或 者 执行 自己 不 太 
熟悉 的 任务 的 用 户 来 说 ， 最 好 是 让 每 一 个 瞬间 都 尽 可 能 地 易于 理解 。 对 
于 那些 对 使 用 产品 很 有 经 验 ， 或 者 执行 非常 普通 的 任务 的 用 户 来 说 ， 则 
最 好 是 尽量 缩短 流程 ， 别 让 过 程 变 得 让 人 厌烦 。 不 管 是 哪 种 情况 ， 最 关 
键 的 是 让 每 个 步骤 都 清晰 易 懂 ， 同 时 不 太 复 杂 。 


用 户 一 般 不 会 频繁 地 和 评级 系统 打交道 ， 而 且 还 得 面 对 不 同 网 站 的 各 种 
版 本 。 因 此 我 于 可 稳妥 一 点 : 只 求 清晰 ， 不 求 效率 。 


信任 该 信任 的 


我 兽 经 使 用 过 上 述 设 计 ， 但 是 其 中 没有 Rated 15 times 的 说 明 ， 那 只 是 由 
于 我 当时 还 没有 想到 。 那 时 ， 我 认为 自己 已 经 得 到 了 一 个 足够 棒 的 设计 ， 
并 且 在 一 次 关于 Designing the Obvious 的 演讲 中 谈 到 了 它 。 


当时 有 一 位 听众 建议 说 这 个 系统 里 面 应 该 声明 已 经 有 多 少 人 进行 了 评分 ， 
这 能 帮助 用 户 更 好 地 判断 自己 的 评级 是 否 有 意义 。 毕 竟 ， 如 果 只 有 一 个 
人 做 了 评价 ， 哪 怕 是 五 星 ， 也 并 不 一 定 就 表示 这 个 产品 很 伟大 。 它 只 表 
示 现 在 有 一 个 人 认为 这 个 产品 很 伟大 而 已 。 


而 如 果 有 30 个 人 给 它 评 四 星 半 ， 相 比 之 下 则 会 有 意义 得 多 。 

我 站 在 那里 ， 心 里 想 ， 这 真是 个 好 点 子 。 

我 告诉 那 位 可 敬 的 先生 我 将 科 穷 他 的 想法 ， 并 且 会 用 到 我 的 下 一 本 书 里 。 
所 以 ， 我 在 此 专门 提 及 此 事 。 谢 了 ， 伙 计 。 
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几乎 每 一 天 ， 我 都 要 花 上 两 三 个 小 时 来 处 理 电 子 邮 件 、 浏 览 新 闻 、 阅 读 
博客 日 志 ， 然 后 再 查看 那些 Blog 里 所 有 我 感 兴趣 的 链接 。 这 还 算是 好 
的 ， 有 时 候 根 本 不 止 两 三 小 时 。 


毫 无 疑问 ， 我 是 想 一 下 子 管理 太 多 的 信息 ， 但 这 个 话题 我 们 可 以 换个 时 
间 来 讨论 (还 有 ， 我 在 给 客户 账单 时 可 从 没 把 这 些 时 间 也 算 进去 )。 


我 想 说 的 是 ， 网 上 的 信息 量 极其 巨大 ， 而 管理 它们 可 是 一 项 绝 不 轻松 的 
工作 。 我 们 每 天 为 管理 这 些 数据 分 类 所 花费 的 时 间 都 只 是 为 了 达到 一 个 
目的 : 组 织 它 们 。 这 样 我 们 才 会 觉得 自己 是 生活 积极 的 参与 者 ， 而 不 是 
思春 地 让 珍贵 的 时 间 缴 缴 流 逝 。 


对 于 那些 访问 我 们 网 站 或 者 使 用 我 们 产品 的 人 来 说 也 是 一 样 ， 他 们 在 网 

上 需要 学 习 新 知识 ， 需 要 做 计划 ， 以 及 其 他 各 种 各 样 的 事情 。 不 管 有 没 
意识 到 ， 他 们 一 直 都 在 乞求 用 科学 的 方法 有 效 地 获得 每 天 最 想 要 的 信 
息 。 而 尽管 现在 有 很 多 相关 的 技术 ， 但 是 大 部 分 仍然 未 能 进入 主流 。 


即使 是 RSS 这 种 从 可 信赖 站 点 获取 新 闻 及 行业 见解 的 解决 方案 ， 也 仍然 
没 能 成 为 一 个 能 被 广泛 理解 的 典型 范例 ， 更 别 说 成 为 家 喻 户 晓 的 词汇 了 。 


因此 ， 在 接 下 来 的 几 间 中， 我 们 将 针对 如 何 推动 信息 管理 加 以 阐述 。 我 
们 将 讨论 如 何 把 诸如 RSS 和 Tag( 自 定义 标签 ) 模式 等 陌生 的 想法 阐述 
得 更 有 实际 意义 、 如 何 通过 拖 放 操作 来 组 织 页 面 内 容 ， 以 及 如 何 使 用 系 
统 通知 来 管理 中 断 。 

我 们 甚至 还 会 讨论 为 改变 而 设计 的 概念 ， 这 样 用 户 就 能 在 一 头 掉 进 完全 
轿 新 的 设计 而 晕 头 转向 之 前 先 适 应 你 的 想法 。( 我 们 已 经 对 此 考虑 得 足够 
多 了 ， 一 点 不 需要 夸张 ! ) 


这 些 瞬 间 都 应 该 表现 得 非常 简单 ， 并 且 我 们 有 几 种 途径 可 以 达到 这 个 目 
标 。 
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要 想 让 用 户 战胜 对 新 生 Web 技术 的 陌生 感 并 加 以 运用 ， 最 困难 的 一 点 就 
是 首先 要 意识 到 人 们 并 不 关心 技术 本 身 ， 而 是 关心 自己 能 得 到 什么 。 我 
们 推广 的 并 不 是 技术 ， 而 是 技术 所 能 带 来 的 好 处 。 


为 了 说 得 更 明白 ， 我 们 来 看 看 RSS。RSS 由 于 各 种 原因 并 没有 获得 广泛 
认可 ， 造 成 的 原因 有 很 多 。 比 如 ， 学 习 新 事物 有 潜在 的 困难 。 再 比如 ， 
使 用 News Reader (新闻 阅 读 右 〉 所 带 来 的 好 处 也 许 并 不 值得 我 去 安装 ， 
并 让 它 进入 自己 的 正常 生活 。 而 更 重要 的 原因 是 ， 事 实 上 绝 大 部 分 人 其 
至 包括 一 些 已 经 使 用 News Reader 的 人 根本 就 不 知道 RSS 这 个 词 到 底 是 
什么 意思 。 这 几 个 缩写 字母 常常 被 用 在 某 个 按钮 上 ， 指 向 订阅 页 面 。 但 
因为 不 理解 RSS 的 意思 ， 用 户 也 很 少 会 去 单 击 这 些 按钮 。 毕 竞 ， 按 钮 标 
签 应 该 在 用 户 脑 海中 建立 清晰 的 预期 ， 并 且 告 诉 他 们 点 击 后 将 会 发 生 什 
As 


推广 某 项 新 技术 时 ， 我 们 的 首要 目标 应 该 是 让 它 通俗 易 懂 。 人 们 愿意 学 
习 新 的 想法 ， 但 这 些 想 法 必须 能 够 学 习 。 这 一 点 对 于 任何 新 技术 都 是 适 
用 的 。 

有 些 网 站 在 启用 RSS 时 已 经 开始 尝试 解决 这 一 问题 。 

FeedBurner.com "在 很 星 以 前 就 告诉 我 订阅 RSS 并 不 像 访问 牙医 那么 可 
怕 。 他 们 并 没有 显示 丑陋 、 冰 冷 、 满 是 XML 的 页 面 ， 然 后 等 着 用 户 自动 
明白 原来 需要 把 URL 复制 粘贴 到 阅读 需 里 面 去 。FeedBurner 在 这 里 表现 
得 更 为 友好 ， 如 图 25-1 所 示 。 












































































































































































































































(D FeedBurner.com 致力 于 通过 博客 和 RSS. Feed 的 形式 在 网 络 媒体 和 广大 受众 之 间 进 
行 联接 。 网 址 为 https://www.feedburner.com/fb/a/home。 译 者 注 
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Robert Hoekman, Jr. 


syndicated content powered by FeedBurner 








FeedBurner makes it easy to receive content updates 


in My Yahoo!, Newsgator, Bloglines, and other news Subscribe Now! 



































readers. -With web-based news readers. Click your choice below: 

Learn more about syndication and FeedBurner... MYAOL 
Rojo | EE B netvibes | 

A message from this feed's publisher: This is an XML OO = 

content feed. It is intended to be viewed in a E. Googie.) (i rers 

newsreader or syndicated to another site, subject to With other readers: 


copyright and fair use. 


(Choose Your Reader) 


E] Get Robert Hoekman, Jr. delivered by email 


Embed this content on your site 
国 Embed with: SpringWidgets 











图 25-1 


他 们 展现 在 我 面前 的 是 一 个 相当 吸引 人 的 页 面 ， 有 着 整齐 的 博客 内 容 。 
而 在 越 来 越 多 的 在 线 和 桌面 RSS Reader 程序 冒 出 来 的 同时 ，FeedBurner 
提供 了 一 种 被 称 为 Chicklet? 的 东西 。 它 只 需 点 击 一 次 就 能 轻而易举 地 订 
阅 Feed。 该 页 面 中 没有 任何 XML， 而 且 FeedBurner 也 避免 使 用 过 多 的 
专业 术语 。RSS 缩写 根本 没有 在 页 面 中 出 现 。 


WHT, FeedBurner, PHERI. 


如 图 25-2 所 示 ，AddThis.com2 Jr sc ff] 4t, Ec e 2/8 f. Ab NIE E M b 
了 一 堆 Chicklet， 这 样 任何 使 用 过 BlogReader 的 人 都 能 很 容易 地 订阅 。 
AddThis 同样 在 设计 中 完全 按 弃 了 RSS 的 缩写 ， 而 是 使 用 Feed Reader. 


这 些 网 站 在 将 新 点 子 通俗 化 方面 成 效 斐然 。 但 是 同时 它们 也 排斥 了 一 些 
东西 。 这 些 网 站 没有 提供 其 他 可 以 订阅 Feed 的 方法 ， 事 实 上 它们 只 关注 
通过 RSS Reader 来 订阅 。 











(D Chicklet 也 被 称 为 “社会 性 书签 ” 实际 上 就 是 一 种 小 图 标 ， 以 图 形 化 的 方式 声明 
Reader 的 出 处 ， 用 户 只 需 点 击 该 图 标 即 能 通过 所 选择 的 Reader 来 进行 订阅 。 









































译 者 注 
@ 和 FeedRurner 一 样 ，AddThis 同样 是 最 热门 的 Web2.0 网 站 之 一 。 它 可 以 说 是 网 上 
书签 和 共享 按钮 的 标准 制定 者 。 网 址 为 http://addthis.com/。 一 一 译 者 注 














25. 破译 其 他 选择 — 177 
其 实 还 有 很 多 其 他 选择 。 我 决定 深入 探索 ， 看 看 如 何 能 把 其 他 方法 也 清 
楚 地 展示 出 来 ， 这 样 用 户 就 能 轻松 地 理解 并 且 运 用 它们 ， 而 且 这 样 做 的 
好 处 是 显而易见 的 。 





Add This .coM Home | My Account | About 


Subscribe to feed: 
Studio Sedition: Designing with Code [view xml] 


Select from these web-based feed readers: 

















B_J Bloglines 
E ^ad to Coogle 
£3 Technorati Q9 netvibes | 
|t Windows Live Ber) 

EA onini | 





O Please don't prompt me every time, send me directly to my favorite Feed reader. 
Tip: you can always go to "My Account" to reset this setting. 


GET YOUR BUTTON! RssFEE0 (st. 


Get your own AddThis button! It will help your visitors subscribe to your feed, and 
promote it to the social services, sending you back more traffic. 





图 25-2 


Q25.1 破译 其 他 选择 


首先 我 在 通 往 订阅 页 面 的 按钮 上 使 用 了 Subscribe 〈 订 阅 ) 的 标签 ， 而 不 
是 RSS。 使 用 能 够 建立 强烈 直观 印象 的 词汇 可 以 消除 语言 障碍 ， 并 且 降 
低 对 新 生 事物 的 学 习 曲 线 。 这 很 简单 。 

然后 我 借鉴 了 FeedBurner 的 方法 ， 在 页 面 上 创建 了 一 组 Chicklet。 这 里 
我 仍然 使 用 了 在 第 22 章 讨论 过 的 博客 模板 ， 如 图 25-3 所 示 。 

这 里 的 想法 是 向 用 户 展 现 一 个 看 上 去 仍 属于 本 网 站 的 页 面 ， 而 不 是 把 他 
们 送 到 类 似 FeedBurner 或 者 AddThis 那样 的 页 面 中 去 。 因 此 我 保留 了 工 
具 栏 中 的 站 点 导航 区 域 以 及 搜索 区 域 。 


那些 已 经 拥有 各 种 在 线 或 桌面 Reader 程序 的 人 ， 只 需 单 击 某 个 Chicklet 








178 $253 让 RSS 更 有 意义 


就 能 完成 订阅 。 


The Obvious Blog 


Short blog description goes here to provide context to 
users who land on this page and have no idea what 
they're looking at. 


一 
[ | Subscribe to "The Obvious Blog" Back to the blog 

If you already use one of the following RSS feed readers, 

dick it to auto-subscribe to this blog. If not, clicking the 








In this site button will take you to a registration page. 
Main nav link B netvibes | E o 9 | 
Main nav link 

" 7 EX mao) G — ce [+ e» 
Main nav link 





You can also simply copy the web address below and paste 
it into the Add Feed (or similar) field in your RSS reader. 


htpyeed mydomain com | Ceopy) 





图 25-3 


有 些 人 所 用 的 Reader 没有 在 页 面 中 列举 出 来 ， 我 也 为 他 们 提供 了 订阅 的 
方式 ， 并 在 旁边 附加 了 说 明 。 他 们 所 要 做 的 只 是 简单 地 把 Feed 地 址 复制 
并 粘贴 到 自己 的 Feed Reader 中 去 。 文 本 框 中 ， 网 址 已 经 默认 选中 ， 而 劳 
边 就 是 Copy (复制 ) 按钮 。 通 过 这 种 方式 ， 用 户 只 需 单 击 Copy 就 完成 
了 在 该 页 面 的 工作 。 


以 上 是 订阅 Feed 的 第 一 种 方法 ， 所 以 我 把 注意 力 放 在 了 其 他 选择 上 。 


首先 是 我 添加 了 一 个 选项 以 便 收取 关于 博客 更 新 的 电子 邮件 通知 。 见 图 
25-4 下 方 。 


有 些 网 站 ， 包 括 FeedBurner， 人 允许 用 户 把 RSS 转化 为 电子 邮件 的 
Newsletter( 时 事 通 讯 ) 订阅 服务 。 因 为 在 今天 这 是 一 件 很 容易 的 事情 ， 
所 以 我 们 无 需 任何 努力 就 能 添加 这 一 功能 。 实 际 上 ， 提 供 这 种 通过 电子 
邮件 获取 内 容 更 新 的 选择 将 会 极 大 地 增加 你 的 订阅 率 。 因 为 电子 邮件 仍 
然 是 网 络 营销 最 有 效 的 方式 之 一 (并 不 是 每 个 人 都 阅读 博客 日 志 ， 即 使 
他 们 拥有 某 个 Reader 账户 。 更 多 的 人 还 是 愿意 阅读 他 们 的 电子 邮件 )。 
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CC ] Subscribe to "The Obvious Blog" 








: 
Cibi Option 1: Use an RSS reader 
If you already use one of the following RSS feed readers, 
In this site Click it to auto-subscribe to this blog. If not, clicking the 
button will take you to a registration page. 
站 — 
Main nav enx B netvibes Biogiine | ES o "eu rotor 
Main nav link * 
Main nav ink B cue Et» 


ERE 


You can also simply copy the web address below and paste 
it into the Add Feed (or similar) field in your RSS reader. 


, httpteed.mydomain.com | Copy , 


Option 2: Receive email notifications 


Enter your email address below and we'll send you an email 
whenever there is new content available on the blog. 


| eg. me&mydomain.com ( Subscribe ) 





图 25-4 
进行 这 些 设计 时 ， 我 在 标题 上 还 加 上 了 Optio 1〈 选 择 1) 和 Option 2 
(选择 2) 的 字眼 。 这 样 用户 就 能 通过 推理 很 快 地 认识 到 第 一 部 分 并 不 是 
他 们 唯一 的 选择 。 
然后 最 后 一 种 方式 是 通过 浏览 器 订阅 并 浏览 RSS Feed。 我 添加 了 第 三 个 
部 分 ， JLE] 25-5. 


末尾 这 一 部 分 包括 了 一 段 指 示 性 文字 ， 说 明 如 何 使 用 主流 浏览 器 (IE、 
苹果 的 Safari， 以 及 Firefox) 来 订阅 RSS Feed. 


最 后 ， 为 了 进一步 让 该 技术 更 加 容易 学 习 ， 我 把 术语 RSS 全 部 都 换 成 了 


News Reader. 














清晰 的 标题 、 简 单 的 指示 说 明 ， 以 及 简便 、 快 速 的 解决 方案 已 经 迈 出 了 
一 大 步 ， 让 订阅 流程 变 得 更 易于 理解 ， 并 且 值 得 尝试 。 去 掉 RSS 缩写 只 
是 为 了 让 该 技术 更 易于 接受 所 做 的 最 后 一 点 尝试 。 


使 用 News Reader、 订 阅 电 子 邮 件 通 知 、 通 过 浏览 器 本 身 来 管理 Feed. 
用 户 现在 有 了 多 种 选择 来 订阅 内 容 ， 而 且 每 种 方式 都 无 需 付 出 过 多 努力 。 
而 把 讨厌 的 专业 词汇 吻 除 出 去 ， 即 使 是 那些 业界 之 外 的 人 也 能 很 容易 地 
理解 这 项 技术 。 
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C | Subscribe to "The Obvious Blog" 





Search ) ^ 
Option 1: Use a news reader 
If you already use one of the following news feed readers, 
In this site Click it to auto-subscribe to this blog. If not, clicking the 
button will take you to a registration page. 
Main nav link RETI Muy 
— O netvibes | El o sone ] 
Main nav ink EE mer] cu — 86 


You can also simply copy the web address below and paste 
itinto the Add Feed (or similar) field in your news reader. 


, hipj/feod.mydomain.com | Copy) 


Option 2: Receive email notifications 
Enter your email address below and we'll send you an email 
whenever there is new content available on the blog. 


[ ea. meGmydomain.com ( Subscribe ) 


Option 3: Use your browser 

Most modern browsers offer a way to subscribe to content 
80 it can be read in your browser instead of through a news 
reader. Following are instructions for how to do this in 
several browsers. 

Internet Explorer 7 (Windows only) 

[Instructions go here ...] 

Safari (Windows and Macintosh) 

[Instructions go here ...] 


Firefox (Windows and Macintosh) 


[Instructions go here ...] 





图 25-5 


一 个 新 想法 是 否 容 易 理 解 是 其 成 败 的 关键 。 诸 如 RSS 和 XML 这 种 词语 
会 妨碍 用 户 形 成 稳固 的 直观 印象 ， 也 就 很 难 从 中 获 利 。 


除 掉 它 们 ， 事 情 就 会 让 人 很 容易 接受 。 








第 26 章 
目 定 义 标 签 








在 我 开始 唆 唆 不 休 地 讲述 关于 Tag“〈 自 定义 标签 ) 的 问题 之 前 ， 你 们 应 该 
弄 明白 一 些 事情 。 


我 真 的 很 喜欢 Tag 这 个 想法 。 为 茶 个 单独 的 内 容 应 用 多 个 Tag， 意 味 着 它 
将 更 容易 查找 ， 而 且 这 种 组 织 方式 更 富 弹 性 ， 远 比 现代 操作 系统 所 用 的 
基于 文件 夹 模 式 的 组 织 方 式 要 好 得 多 。 


通过 Tag 模式 ， 你 可 以 为 areo ae a e 
作 )、to-do〔 待 办 事宜 )、this_week (本 周 ) 或 者 projects i HO. s 
可 以 把 某 个 资料 文件 划 归 为 library《〈 图 书馆 )、research 〈 人 研究 文档 )， 然 
后 再 为 它 加 上 具体 的 标题 ， 例 如 usability (可 用 性 ) 或 者 user_expeirence 
《用 户 体验 ) 等 。 


Tag 模式 的 这 种 弹性 意味 着 你 将 能 通过 无 数 种 方式 来 查找 和 组 织 内 容 。 你 
可 以 用 任何 自己 习惯 的 方式 快速 地 定义 它们 。 


RIET. 
但 是 Tag 本 身 并 不 是 一 个 完美 的 系统 。 如 果 你 为 社区 用 户 提供 了 Tag 模 
式 ， 有 时 候 事 情 会 变 得 很 糟糕 ， 因 为 这 里 面 有 许多 潜在 的 问题 。 


首先 ， 就 像 RSS 一 样 ，Tag 模式 也 是 一 个 全 新 的 想法 ， 但 并 没有 多 少 网 
站 能 让 它 不 言 自 明 ， 或 者 阐述 得 很 清楚 。 其 次 ， 地 球 上 没有 哪 种 语言 是 
Ve o RN visae die BARA Brat 2€ BR AS De 

REER. B=, AOEJPANAEÉBUSR A. DUIS] —- Tag 可 
E. 而 最 后 一 点 ， 运 用 Tag 模式 的 网 站 中 所 用 
的 搜索 引擎 对 Tag 标签 的 支持 会 远大 于 对 自然 关键 词 的 支持 。 
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比如 说 ， 我 在 Flickr.com 上 搜索 第 一 届 Voices That Matter 峰会 ?的 图 片 
时 ， 使 用 的 关键 词 是 Voices That Matter Web Design Conference (Voices 
That Matter 网 页 设计 峰会 )。 我 用 Google 搜索 时 就 用 的 这 几 个 关键 词 ， 
所 以 在 Flickr 里 面 我 同样 用 它们 来 搜索 ， 如 图 26-1 所 示 。 
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图 26-1 





但 是 Flickr 只 返回 了 4 个 搜索 结果 。 


我 把 关键 词 改 为 Voices That Matter， 得 到 了 700 多 张 图 片 ， 但 其 中 有 三 
分 之 一 都 和 该 峰会 毫 无 关系 。 


我 重新 在 关键 词 中 加 入 了 Conference OZ, iX HERI T 58 个 结果 。 
这 肯定 出 了 问题 ， 因 为 我 知道 仅 该 会 议 协调 人 自己 就 上 传 了 至 少 200 5K 
照片 。 


用 了 3 个 最 明显 的 搜索 关键 词 ， 却 几乎 什么 也 没 得 到 ， 于 是 我 决定 用 Tag 
标签 试 试 。 我 输入 了 VTMWDC， 也 就 是 Voices That Matter Web Design 
Conference (ZAHO 的 缩写 ， 最 终 得 到 了 294 个 结果 ， 其 中 每 一 个 都 
来 自 于 那 次 会 议 。 还 真是 个 好 关键 词 ! 

当然 ， 我 无 法 知道 这 个 Tag 是 否 涵盖 了 那 次 活动 的 所 有 图 片 。 而 且 我 也 
不 太 明 白 自 己 在 一 开始 是 怎么 想到 用 这 个 会 议 的 缩写 来 作为 关键 词 的 。 

如 果 没 有 想到 用 缩写 字母 来 搜索 ， 我 可 能 就 会 被 困 住 。 但 Flickr 并 不 能 
期 望 每 个 人 都 能 自己 发 现 原来 用 Tag 搜索 才 会 更 有 效 。 而 且 如 果 是 要 查 
找 某 些 特殊 的 东西 ， 我 又 怎 能 知道 应 该 使 用 哪些 Tag 来 搜索 呢 ? 后 来 我 












































(D Voices That Matter 面向 技术 、 设 计 和 商业 界 的 领袖 人 物 ， 为 他 们 展示 那些 “投身 于 
新 技术 、 新 方法 和 新 发 明 ” 并 “做 出 了 影响 业界 的 杰出 贡献 ”的 人 。 网 址 为 http:// 


www.voicesthatmatter.com/。 一 一 译 者 注 
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又 使 用 了 VTM 进行 搜索 ， 结 果 得 到 了 更 多 的 相关 图 片 。 


为 了 让 Tag 系统 变 得 真正 有 效 ， 还 需要 再 附加 一 些 功能 ， 让 创建 和 使 用 
Tag 标签 能 够 更 简单 、 更 轻松 。 


C26.1 分 类 系统 、 分 众 分 类 系统 以 及 变异 体 


有 两 种 不 同 的 方法 可 以 组 织 网 站 内 容 。 一 个 是 建立 分 类 系统 (Tax- 
onomy )， 也 就 是 说 一 旦 你 定义 好 类 别 ， 所 有 人 都 将 遵循 这 个 分 类 。 男 一 
个 是 分 众 分 类 系统 (Folksonomy 72 )， 它 算是 分 类 系统 的 一 种 协作 型 式 。 
通过 这 种 方法 ， 用 户 可 以 根据 自己 的 需要 持续 不 断 地 添加 和 改变 分 类 。 
如 果 你 决定 运用 分 众 分 类 系统 、 使 用 Tag 标签 ， 那 么 上 述 所 有 的 问题 就 
会 随 之 出 现 。 因 而 很 关键 的 一 点 就 是 如 何 让 Tag 模式 显得 更 为 友好 ， 同 
时 支持 用 户 的 思考 方式 。 

所 以 当 我 第 一 次 设计 自己 的 Tag 标签 系统 时 ， 考 虑 了 以 上 所 有 情况 ， 试 
图 寻求 一 种 能 改进 现 有 情况 的 解决 方案 。 

26.1.1 消除 语言 障碍 


为 了 让 初学 者 更 容易 理解 ， 我 尝试 去 掉 专 业 词 汇 Tag 〈 自 定义 标签 )， 而 
是 使 用 Label (标签 )， 就 像 Google 基于 网 页 的 电子 邮件 服务 Gmail 那 
样 ， 见 图 26-2. 
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26-2 

















(D Folksonomy 是 由 Folks (CAFF) FN Taxonomy (分 类 法 ) 合成 而 得 的 生 造 词 。 它 由 
社会 性 书签 服务 中 最 具 特 色 的 自 定义 标签 (Tag) 功能 衍生 而 来 ， 指 “群众 ”自发 
性 定义 的 平面 非 等 级 标签 分 类 。 有 人 称 之 为 “分 众 分 类 ” 也 有 解释 为 社会 分 类 
CSocial Classification )。 一 一 译 者 注 
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“标签 ” 植 根 于 现实 世界 ， 因 此 大 多 数 人 都 很 容易 理解 。 我 们 无 时 无 刻 不 
在 使 用 标签 ， 有 的 人 在 中 餐馆 的 外 卖 盒 上 给 剩 菜 做 记号 ， 还 有 的 人 在 装 
满 杂 物 的 糖果 饶 上 贴 便签 纸 以 便于 日 后 翻 拣 。 


而 男 一 方面 ,“ 自 定义 标签 ”并 不 是 我 们 日 常生 活 中 经 常 接触 的 事物 。 它 
个 新 概念 ， 就 像 在 第 25 章 看 到 的 RSS 缩写 那样 ， 使 用 更 加 熟悉 的 词 
语 能 够 降低 对 新 事物 的 学 习 曲 线 。 


为 了 进一步 让 Tag 系统 更 加 友好 和 熟悉 ， 我 认为 在 创建 Tag 时 不 应 该 使 
用 或 者 显示 下 划 线 〈 例 如 ，my_house )。 


尽管 系统 记录 Tag 的 时 候 需要 保留 下 划 线 〈 因 为 Tag 将 被 用 于 动态 产生 
站 点 的 URL， 而 其 中 不 能 包含 空格 )， 它 们 也 不 需要 以 这 种 方式 展现 给 用 
户 。 总 之 ， 它 们 能 够 而 且 应 该 像 正 常 语言 那样 显示 。 


26.1.2” 阅 述 新 想法 
其 次 ， 我 需要 确保 Tag 模式 的 目的 和 用 法 都 表达 得 足够 清楚 ， 所 以 为 此 
我 提供 了 一 些 简单 的 说 明文 本 。 换 句 话 说， 我 尝试 不 要 去 假设 〔〈 如 第 7 
章 中 所 描述 的 ) 用 户 已 经 知道 Tag 是 什么 以 及 是 如 何 工作 的 ， 而 是 努力 
提供 一 些 简洁 明了 的 文本 来 解释 它 。 
我 用 了 一 种 简单 的 、 类 似 推荐 广告 的 形式 ; 

为 它 贴 上 标签 

添加 标签 ( 例如 my house ) 将 会 使 你 更 容易 地 找到 需要 的 图 


片 ， 并 且 随 意 添加 你 想 要 的 标签 。 我 们 将 会 把 标签 转换 成 链接 ， 
你 只 需 单 击 某 个 链接 就 能 看 到 所 有 使 用 该 标签 的 图 片 。 


26.1.3 ”提出 建议 


不 同 的 人 可 能 (而 且 儿 乎 总 是 〉 会 不 知 不 觉 地 为 同一 个 Tag 创建 多 个 版 
本 。 所 以 我 们 需要 某 种 方法 来 侦 测 那些 相似 的 Tag， 并 且 让 用 户 能 够 为 想 
标记 的 内 容 选 择 那 些 已 有 的 Tago 

例如 ， 某 个 人 在 一 个 照片 共享 网 站 上 传 了 一 些 万 圣 节 派对 的 照片 ， 他 可 


能 会 把 每 张 图 片 都 标记 为 halloween (万 圣 节 )。 而 参加 该 派对 的 男 一 个 
女孩 则 可 能 会 把 她 上 传 的 照片 标记 为 Halloween_party 万圣节 派对 )。 两 


























fi 
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个 Tag 都 很 恰当 ， 但 是 现在 针对 同一 件 事 却 有 多 个 不 同 的 Tag， 因 此 参加 
那 次 聚会 的 其 他 人 可 能 无 法 在 一 次 搜索 中 找到 所 有 的 图 片 。 


(顺便 提 一 句 ， 为 了 解决 这 一 问题 ，Yahoo! 曾经 在 2006 年 的 South by 
Southwest 交互 年 会 上 推行 过 一 种 较 缺 少 技术 含量 的 预防 措施 。 在 那 次 
Yahoo! 的 官方 宴会 上 ， 刘 厅 中 张贴 着 一 些 广告 标语 ， 指 示 宾 客 将 本 次 所 
有 的 Flickr 照片 都 标记 为 Yahoo!_bar_tab， 这 样 所 有 的 参加 者 都 能 够 找 
到 它们 。 这 项 举措 目前 还 没有 席卷 全 国 ， 但 是 想 想 在 每 一 个 宴会 、 派 对 、 
会 议 或 者 其 他 活动 上 都 要 告诉 大 家 应 该 用 什么 Tag 来 记录 活动 ， 这 也 很 


有 意思 。) 
我 做 了 一 些 不 同 的 事 来 解决 这 个 问题 。 


首先 ， 我 认为 网 站 应 该 像 Google Suggest 那样 提供 “自动 完成 ”功能 。 
用 户 输入 某 个 Tag 时 ， 系 统 会 搜索 出 近似 的 Tag， 然 后 把 这 些 Tag 以 列表 
形式 呈现 ， 让 用 户 选 择 其 中 最 适 配 的 一 个 。 


当然 ， 这 个 办 法 潜在 的 不 足 之 处 ， 如 同 第 9 草 所 描述 的 ， 就 是 用 户 有 可 
能 会 选择 一 个 推荐 的 Tag， 但 其 实 他 自己 想 输 入 的 Tag 更 合适 。 


第 二 种 方案 是 在 用 户 输入 了 自己 的 Tag 之 后 显示 一 个 推荐 页 面 。 用 户 输 
A Tag 之 后 ， 系 统 搜 索 出 近似 的 Tag， 然 后 在 下 一 个 页 面 中 陈列 出 来 。 这 
个 页 面 可 以 用 文字 向 用 户 解释 他 可 以 把 自己 的 新 Tag 和 那些 已 被 其 他 人 
创建 出 来 的 Tag 相 匹 配 。 


通过 这 种 方式 ， 为 相同 Tag 创建 多 个 版 本 的 几率 将 会 降低 ， 同 时 查找 相 
关内 容 也 会 更 容易 。 


26.1.4 RE, BRE, BRE 


最 后 ， 网 站 的 搜索 功能 必须 为 自然 关键 字 提供 有 效 的 搜索 结果 ， 而 不 能 
只 针对 Tag〔 就 像 Flickr 那样 )。 


我 知道 从 开发 角度 来 说 这 一 点 也 许 不 太 容 易 做 到 。 但 是 搜索 是 大 多 数 网 
站 最 重要 的 一 个 功能 ， 而 且 它 运转 是 否 良好 ， 这 一 点 至 关 重 要 。 如 果 用 
户 不 能 用 Google 能 接受 的 自然 语言 找到 他 们 想 要 的 内 容 ， 在 网 站 里 费力 
寻找 信息 将 会 很 痛苦 。 
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26.1.5 ” 自 定义 标签 的 未 来 

再 次 重申 ， 新 生 想 法 应 该 易于 学 习 。 剔 除 专业 词汇 能 够 改善 大 部 分 使 用 
Tag 系统 的 网 站 ， 但 很 明显 ， 问 题 不 仅仅 出 在 术语 上 面 。 

Tag 并 不 是 大 多 数 人 都 熟悉 的 东西 ， 因 此 必须 采取 措施 帮助 用 户 对 系统 如 
何 工作 形成 清晰 的 理解 ， 让 他 们 无 需 付 出 多 少 努 力 就 能 搜索 到 想 要 的 内 
容 ， 同 时 用 其 他 用 户 都 能 轻易 找到 的 方式 组 织 页 面 内 容 。 
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那些 帮助 你 管理 信息 的 产品 最 











大 的 一 个 卖点 就 是 组 织 信息 的 能 力 。 使 用 


Dashboard HQ， 用 户 能 够 创建 链接 列表 和 个 人 注释 ， 并 且 能 完全 地 控制 
页 面 内 容 。 而 由 于 页 面 内 容 百 分 之 百 都 是 由 用 户 决 定 的 ， 因 此 他 们 是 否 








能 随 自己 的 需要 来 组 织 信息 非常 重要 。 





为 了 达到 这 一 目标 ， 我 们 在 产品 
及 书签 等 功能 。 同 时 我 们 还 提 作 

















品 中 提供 了 创建 和 删除 模块 、 记 录 注 释 以 
HF 了 通过 拖 放 (drag-and-drop〉 操作 来 重新 











排列 模块 这 一 功能 ， 它 能 够 使 用 户 建立 最 适合 自己 的 顺序 ， 从 而 在 下 次 
访问 页 面 时 能 更 容易 地 找到 自己 想 要 的 东西 。 


然而 ， 为 了 让 拖 放 操作 顺利 进行 ， 这 个 过 程 同样 需要 做 到 清晰 和 简练 。 








C27.1 交互 的 三 种 状态 


nw 








一 个 有 效 的 拖 放 交 互 需要 提供 完 


你 问 这 3 种 状态 是 什么 ? 
27.1.1 “邀请 ” 
首先 是 “邀请 ”状态 。 此 状态 





整 的 3 种 状态 。 





包含 页 面 上 任何 邀请 你 采取 行动 的 元 素 。 




















它 可 以 是 触发 其 个 行为 〈 而 不 是 载 人 某 个 新 页 面 ) 的 按钮 或 者 是 命令 链 
接 ， 或 者 可 以 是 当 鼠 标 悬 停 到 某 个 图 标 上 出 现 的 工具 提示 ， 甚 至 可 以 是 
一 个 改变 了 的 鼠标 指针 ， 提 示 用 户 除了 单 击 之 外 还 可 以 进行 其 他 操作 。 

一 旦 用 户 在 Dashboard HQ 的 页 面 上 单 击 了 Edit This Page《〈 编 辑 本 页 面 ) 
的 链接 ， 就 会 进入 编辑 模式 。 他 将 会 看 到 “邀请 ”状态 提供 了 几 项 任务 可 
以 选择 ， 这 几乎 也 是 所 有 交互 行为 的 默认 状态 。 其 中 一 个 选项 是 删除 某 个 











模块 ， 另 一 个 是 为 模块 重 命名 ， 




















而 最 后 一 个 是 通过 拖 放 重新 排列 模块 。 
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这 里 的 “邀请 ”就 是 显示 在 每 个 模块 左上 角 的 文字 drag iR). WE 
27-1 所 示 。 




















drag Uu drag U 
To do today Edit Company resources Edit 
1) Call Steve Intranet 
2) File the registry forms 401k 
3) Follow up with Dave about Benefits 
yesterday's meeting " 
4) Book the conference room for Corporate site 
Tuesday's meeting Marketing dept. phone list 
5) Meet Jay for lunch Google 
6) Buy plane ticket for Austin trip 
7) Buy dog food 
drag 而 
drag Du) (Goge | Edit 
Dictionary Edit E 
Google News 
Google Maps/Local 
Google Book Search 














图 27-1 


很 简单 ， 不 是 吗 ? 出 现 它 就 表示 邀请 用 户 采取 行动 。 


为 了 让 “邀请 ”更 加 完善 ， 我 们 设 定 当 用 户 鼠 标 移 动 到 文字 drag 上 时 ， 
将 显示 代表 “移动 ”的 指针 ， 这 进一步 传达 给 用 户 这 里 能 够 支持 更 多 的 
行为 。 

27.1.2 “操作 ” 

第 二 个 是 “操作 ”状态 ， 包 含 用 户 要 完成 一 项 任务 所 必须 采取 的 所 有 行 
动 。 它 可 以 只 是 一 步 操作 ， 例 如 单 击 某 个 链接 载 人 新 页 面 ， 也 可 能 需 
要 多 个 步骤 ,例如 复制 某 个 RSS Feed 的 URL 并 粘贴 到 你 喜欢 的 News 
Reader 里 面 ， 然 后 保存 这 个 URL 来 订阅 该 Feed。 


Dashboard HQ 的 “操作 ”状态 包括 单 击 drag 操作 柄 ， 拖 中 模块 到 新 的 位 


置 ， 然 后 释放 鼠标 按钮 (或 者 提起 触感 笔 ) 让 模块 “ 落 ” 到 这 个 新 位 置 
Ee 
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每 一 个 步骤 都 必须 尽 可 能 清楚 ， 证 用 户 能 很 容易 地 学 习 并 且 理 解 这 种 交 
互 行为 。 

稍稍 离 题 一 下 ， 不 论 其 面向 范围 和 目的 ， 上 述 内 容 对 于 任何 交互 都 至 关 
重要 。 所 有 的 交互 行为 都 必须 尽 可 能 地 清晰 。 


提 到 这 一 点 是 因为 ， 很 多 读 过 Designing the Obvious 的 人 都 建议 ， 我 应 该 
把 书 里 面 的 想法 应 用 到 更 大 型 、 企 业 级 的 应 用 软件 里 面 去 。 


我 的 回答 永远 都 是 一 样 的 。 设 计 一 款 大 型 的 软件 当然 意味 着 你 需要 做 更 
多 ， 而 且 需 要 考虑 更 多 ， 但 是 它 并 没有 改变 通用 的 规则 。 


大 型 软件 仍然 需要 提供 最 相关 和 最 基本 的 功能 ， 通 过 启发 式 的 设计 让 用 
户 提高 使 用 效率 ， 并 且 保持 从 一 个 界面 到 下 一 个 界面 的 一 致 性 和 连贯 性 ， 
同时 通过 设计 元 素 让 交互 变 得 更 易学 习 ， 并 且 能 重复 同 种 交互 行为 。 而 
每 一 个 交互 行为 的 每 一 个 步骤 都 需要 尽 可 能 地 简单 和 清楚 ， 特 别 是 在 
“操作 ”状态 中 。 


不 是 简单 ， 也 不 是 清楚 ， 而 是 简单 又 清楚 (有 时 候 这 意味 着 需要 更 多 简 
单 的 步骤 ， 如 第 16 章 所 讨论 的 ， 而 有 时 候 又 意味 着 需要 执行 更 多 的 任 
务 ， 每 个 任务 中 包括 很 少 的 步骤)。 如 果 有 什么 区 别 的 话 ， 只 能 说 相 较 
于 我 经 常 谈 到 的 小 型 Web 应 用 而 言 ， 在 大 型 软件 中 这 些 显得 更 加 重要 而 
已 。 更 大 型 并 不 意味 着 更 加 复 休 。 更 大 型 只 意味 着 ， 喇 ， 它 更 大 而 已 。 


现在 让 我 们 回 到 主题 。 


不 管 这 位 用 户 是 第 一 次 操作 还 是 第 400 次 操作 ， 拖 放 交 互 中 的 每 一 个 步 
又 都 需要 表现 其 自身 意义 。 

因此 ， 只 要 用 户 把 鼠标 移动 到 drag 操作 柄 上 ， 单 击 ， 然 后 开始 拖 息 模块 ， 
我 们 就 需要 确切 地 传达 出 因为 位 置 的 改变 而 对 页 面 产生 的 影响 。 

为 了 做 到 这 一 点 ， 我 们 创建 了 一 个 虚线 框 来 显示 模块 将 会 “ 落 ” 到 的 新 
位 置 ， 同 时 也 移动 了 其 他 模块 的 位 置 ， 以 此 确切 地 表现 出 每 一 个 元 素 因 
此 将 会 受到 的 影响 。 如 图 27-2 所 示 。 
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图 27-2 
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作 的 同时 ， 界 面 也 根据 需要 进行 更 新 ， 以 确切 地 显示 出 操作 将 对 页 面 产 
生 的 影响 。 


27.1.3 “实现 ” 


第 三 个 是 “实现 ”状态 。 几 乎 每 个 人 都 曾经 把 它 忘记 过 。 相 信 我 ， 我 自 
己 就 干 过 这 事 。 但 也 许 是 因为 “做 事 就 要 有 始 有 终 ” 的 想法 作怪 ， 每 当 
忘记 它 时 ， 当 天 晚上 肯定 会 在 床上 加 转 反 侧 ， 苦 苗 思 索 为 什么 自己 的 
设计 无 法 令 人 满意 ， 所 以 这 对 我 来 说 是 个 教训 。 现 在 我 已 经 学 会 牢 牢 记 
住 它 了 ， 不 然 等 着 我 的 肯定 又 是 一 个 不 眠 之 夜 。 


“实现 ”状态 就 是 让 用 户 知道 他 的 交互 已 经 实现 了 。 这 听 起 来 似乎 非常 简 
单 ， 但 是 别 忘 了 ， 令 人 不 满 的 交互 行为 会 让 人 对 设计 者 产生 不 满 。 

“实现 ”有 了 时候 内需 显 示 1 行文 字 ， 告 诉 用 户 他 的 个 人 资料 信息 已 经 保 
存 。 有 时 候 则 意味 着 当 用 户 在 “联系 我 们 ”表单 中 发 送 电 子 邮 件 时 向 他 
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们 表示 感谢 。 还 有 的 时 候 它 表示 在 某 人 从 你 的 购物 网 站 上 成 功 订购 后 发 
送 的 一 封 确认 邮件 ， 以 及 发 货 状 态 的 更 新 。 


不 过 ， 有 时 候 对 “实现 ”的 指示 也 不 需要 太 明 确 。 在 大 多 数 拖 放 交互 的 
例子 中 ， 当 被 拖 忠 的 模块 和 其 他 模块 被 “ 吸 ” 到 各 自 新 的 位 置 时 ， 就 已 
经 充分 地 表明 “实现 ”了 ， 如 图 27-3 所 示 。 
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图 27-3 


这 就 是 Dashboard HQ 的 做 法 。 别 的 什么 都 不 需要 ， 而 且 多 了 反而 会 让 交 
互 行为 更 加 复杂 。 

人 们 那 种 最 普通 的 、 几 乎 是 天 生 的 对 于 在 桌 上 排 布 纸张 或 者 拼图 所 产生 
的 直观 印象 ， 这 对 于 拖 放 操作 来 说 就 已 经 足够 了 。 更 别 说 他 们 使 用 计算 
机 时 ， 几 乎 每 天 都 要 用 鼠标 来 回 拖 放 文件 了 。 

27.1.A ”完成 的 感觉 


不 论 是 复杂 还 是 简单 的 交互 ， 我 们 都 需要 呈现 这 3 种 状态 ， 才 能 让 用 户 
理解 如 何 开始 、 如 何 完成 ， 然 后 相信 自己 操作 无 误 。 
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我 们 很 容易 就 会 忘记 “实现 ”状态 ， 例 如 在 某 个 五 星 评级 系统 中 你 点 击 
了 某 颗 星 ， 然 后 什么 也 没有 发 生 《〈“ 如 第 24 章 所 讨论 的 )。 但 如 果 没 有 它 ， 
用 户 可 能 就 会 对 自己 的 操作 不 太 确 信 ， 也 就 没有 信心 继续 其 他 操作 。 


不 管 是 简单 还 是 大 型 的 应 用 程序 ， 请 确保 每 一 个 步骤 都 清晰 ， 并 且 给 出 
适当 的 反馈 。 这 样 所 有 的 交互 行为 都 将 会 更 有 效率 。 


27.1.5 ”判断 你 的 功能 是 否 正 当 


拖 放 操作 可 以 适用 于 各 种 地 方 。 在 iGoogle fI My Yahoo!®? 上， 用 户 可 以 
在 自己 的 个 性 化 主页 上 重新 排列 各 种 模块 。 而 在 Ning.com2 上 ， 用 户 可 
以 把 自己 想 要 的 元 素 图 标 拖 忠 到 自己 主页 的 缩 略 图 里 面 ， 并 随意 安排 它 
们 的 位 置 。 


但 是 ， 尽 管 设计 得 非常 好 ， 拖 放 操 作 和 个 性 化 主页 这 些 功能 仍然 需要 视 
环境 而 定 。 当 包含 它们 的 这 个 页 面 是 用 户 的 “目的 地 ”时 ， 它 们 看 上 去 
会 很 不 错 ; 但 如 果 用 户 只 是 “路 过 ”这 个 页 面 ， 则 没有 什么 必要 。 


不 同 的 应 用 扮演 着 不 同 的 角色 。 例 如 某 个 项 目 管理 系统 ， 可 能 一 连 几 天 
都 会 在 浏览 需 里 保持 打开 的 状态 ， 持 续 不 断 地 被 核查 、 更 新 和 回顾 。 它 
就 是 “目的 地 ”。 你 将 会 在 其 中 花 很 长 时 间 ， 因 此 它 可 能 需要 某 种 合适 的 
个 性 化 定制 。 


而 “路 过 ” 则 是 指 你 在 通 向 更 重要 事物 中 才 会 使 用 它 ， 可 能 还 只 是 偶尔 
使 用 。 


政府 门户 网 站 是 个 很 好 的 例子 。 你 登录 政府 门户 网 站 是 为 了 寻找 一 些 确 
实 需 要 的 信息 ， 例 如 如 何在 线 延 长 驾照 的 注册 期 。 像 这 样 的 一 个 页 面 不 
需要 个 性 化 功能 ， 而 且 绝 大 多 数 情 况 下 ， 这 种 功能 都 将 被 无 情 地 浪费 ， 
甚至 会 让 寻找 信息 变 得 更 加 困难 。 

























































































(D Google 为 用 户 提 供 的 个 性 化 主页 。 用 户 可 以 在 主页 上 添加 各 种 个 性 化 工具 ， 例 如 
天 气 、Gmail、 日 历 、 财 经 要 闻 等 ， 同 时 可 以 自由 排列 各 工具 模块 的 位 置 。 网 址 为 
http://www.google.com/ig。 一 一 译 者 注 

(2) Yahoo! 为 用 户 提 供 的 个 性 化 主页 ， 功 能 类 似 iGoogle。 网 址 为 http://my.yahoo.com/。 

译 者 注 

© Ning.com 是 一 个 社区 交互 性 网 站 ， 个 性 化 主页 的 功能 类 似 iGoogle 和 My Yahoo!。 
本 书 作者 在 Ning.com 上 的 主页 地 址 为 http://designingtheobvious.ning.com/。 

一 一 译 者 注 
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进入 这 样 的 页 面 时 ， 我 们 很 快 地 扫描 ， 找 到 第 一 个 看 上 去 合理 的 链接 ， 
然后 尽快 离开 这 里 。 这 不 是 那 种 我 们 耗费 宝贵 时 间 来 根据 特殊 需求 进行 
定制 的 页 面 。 


但 可 笑 的 是 ， 我 经 常 看 见 这 种 “途径 ”页 面 变 成 了 极 富 功能 性 的 个 性 化 
主页 ， 仅 仅 是 因为 所 有 者 中 的 某 个 人 认为 既然 它 适 合 iGoogle， 那 么 也 将 


会 适合 他 们 。 


设想 一 下 你 的 政府 网 站 变 成 了 3 列 ， 其 中 满 是 可 以 拖 忠 的 模块 ， 你 可 以 
查询 天 气 、 得 到 最 新 的 股票 行情 ， 甚 至 还 能 玩 纸牌 游戏 (这些 都 是 你 在 
iGoogle 上 能 做 的 事情 )。 


那 会 很 奇怪 ， 不 是 吗 ? 这 些 不 是 人 们 在 政府 网 站 上 寻找 的 东西 ， 而 且 政 
府 也 根本 不 会 因为 提供 了 这 种 功能 而 获得 任何 好 处 。 这 种 网 站 应 该 把 注 
意 力 放 在 那些 人 们 在 这 里 真正 想 找 的 政府 服务 信息 上 面 。 


男 一 方面 ， 诸 如 iGoogle、My Yahoo! 和 Dashboard HQ 这 种 服务 ， 它 们 
是 由 用 户 设 计 的 ， 而 不 是 为 用 户 设计 的 。 这 些 页 面 里 的 内 容 完全 由 用 户 
决定 ， 就 好 像 他 们 在 设计 自己 的 门户 网 站 自己 的 “途径 ”页 面 一 样 。 
因此 ， 这 些 看 上 去 是 “途径 ”的 应 用 ， 变 成 了 “目的 ”应 用 。 


不 知道 你 会 怎么 样 ， 反 正 我 不 会 把 时 间 都 花 在 政府 网 站 上 ， 不 管 它 有 多 
酷 。 也 许 那些 政府 职员 会 把 它 当 作 自 己 的 个 人 主页 ， 甚 至 认为 个 性 化 功 
能 非常 有 用 ， 但 这 些 人 对 于 网 站 的 整个 受众 群体 来 说 ， 只 占 非 常 小 的 一 
部 分 。 网 站 不 应 该 为 这 些 人 而 设计 ， 而 应 该 为 受众 中 人 数 最 多 的 群体 设 
Ws 

而 当 这 种 功能 确实 有 意义 时 〔( 就 像 Dashboard HQ 那样 )， 交 互 是 否 流 畅 
而 愉快 就 显得 至 关 重 要 了 。 确 保 交 互 行为 的 3 种 状态 都 清晰 、 明 显 ， 将 
会 让 用 户 更 加 自信 。 
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用 系统 通知 来 管理 中 断 

















假设 你 们 公司 正 准 备 为 旗下 最 受 欢迎 的 Web 应 用 进行 一 次 重要 更 新 ， 同 
时 假设 所 有 的 设计 和 开发 工作 都 已 经 完成 ， 该 应 用 现在 只 等 竺 用户 的 检 
测 ， 而 且 你 计划 在 本 周 内 就 按 下 开关 发 布 这 个 新 版 本 。 
然后 ， 假 设 你 在 这 个 紧要 关头 给 我 打 电话 ， 描 述 了 你 们 的 计划 ， 并 且 硕 
望 我 为 新 的 设计 做 一 次 可 用 性 审查 。 
想 知 道 我 会 说 什么 吗 ? 
首先 ， 我 会 说 下 次 你 应 该 更 早 通知 我 ， 但 那 是 另外 一 回 事 。 
其 次 ， 我 会 问 你 是 否 能 给 自己 所 有 的 用 户 发 送 一 封 电子 邮件 ， 并 且 在 首 
页 上 做 一 点 小 改动 ， 然 后 创建 一 个 页 面 专门 说 明 即 将 做 出 的 更 新 。 然 后 
我 会 问 你 是 否 可 以 在 明 晚 之 前 搞定 这 些 。 
没 错 ， 我 是 个 奇 刻 的 工头 。 
事实 上 ， 我 见 过 太 多 的 Web 应 用 直接 就 这 样 跨 过 门槛 ， 对 那些 最 拥戴 它 
们 的 用 户 却 连 一 名 警告 也 不 提 。 而 这 些 用 户 正 是 那些 之 夹 地 买单 而 且 为 
它们 在 朋友 中 做 宣传 的 人 。 如 果 连 这 些 用 户 都 不 知道 即将 的 改变 ， 更 别 
说 那些 仍旧 在 学 习 并 且 为 你 的 产品 是 否 值 得 使 用 而 犹豫 的 新 手 了 。 
其 实 ， 告 诉 顾 客 你 们 正在 做 一 些 可 能 会 影响 他 们 的 事 ， 会 带 来 很 多 显著 
的 优势 。 以 下 是 这 么 做 的 几 个 主要 原因 。 

B 它 会 给 你 最 忠诚 的 顾客 带 来 一 些 值得 激动 和 期 待 的 事情 。 

B 它 会 给 你 最 保守 、 最 讨厌 改变 的 用 户 足 够 的 警告 ， 这 样 他 们 就 能 

提前 对 新 功能 的 冲击 做 好 充分 准备 。 




















































































































pu 



































28. 为 改变 而 设计 195 


B 它 会 在 你 的 更 新 发 布 之 前 为 人 们 创造 谈资 ， 这 样 你 的 新 版 本 将 会 
迎 来 巨大 的 访问 量 ， 而 且 口 耳 相 传 将 会 为 你 带 来 一 些 新 用 户 。 

B 有 了 它 ， 用 户 就 不 会 在 某 天 登录 后 突然 发 现 所 有 元 素 的 位 置 都 被 
移动 ， 或 者 常用 任务 流程 发 生 了 改变 。 它 会 让 用 户 知 道 自己 即将 
需要 一 些 再 适应 ， 而 且 会 很 值得 。 


悲哀 的 是 ， 很 多 公司 从 来 都 不 愿意 付出 哪怕 一 丁点 努力 来 收获 这 些 利 益 。 
我 一 直 试 图 让 我 为 之 工作 或 合作 的 公司 进行 一 些 此 类 的 尝试 ,但 是 由 于 
各 种 原因 ， 它 们 总 是 玻 包 了 这 一 点 。 


有 时 候 是 因为 开发 团队 即将 面临 项 目的 最 终 期 限 ， 只 是 时 间 不 够 的 缘故 。 
有 时 候 则 是 因为 市 场 团 队 不 敢 事 先 泄露 秘密 ， 害 怕 在 正式 发 布 前 被 某 人 
虽 禄 了 整个 点 子 〈 这 种 观点 很 糟糕 ， 因 为 竞争 是 一 件 好 事 ， 而 且 “ 争 谁 
更 优秀 ” 远 比 “ 争 谁 更 快 进入 市 场 ”要 好 得 多 )。 还 有 些 时 候 仅仅 是 因为 
领导 层 并 不 认为 这 事 很 重要 。 

你 知道 ， 因 为 良好 的 客户 服务 和 稳固 的 营销 业绩 并 不 很 重要 。 

Ae. 

我 们 的 顾客 和 我 们 自己 一 样 ， 生 活 中 有 大 堆 的 事情 需要 担心 。 我 们 的 
工作 不 是 某 天 突然 用 一 个 新 界面 去 惊吓 他 们 ， 然 后 期 待 他 们 能 自己 弄 
懂 并 成 为 专家 。 我 们 的 工作 是 让 他 们 的 生活 更 加 轻松 。 如 果 我 们 事先 
给 顾客 警告 ， 他 们 就 能 更 有 效 地 管理 信息 ， 而 不 是 在 某 个 星期 二 早晨 
被 吓 一 跳 。 


C28.1 为 改变 而 设计 
那么 你 如 何 为 改变 而 设计 呢 ? 


要 回答 这 个 问题 ， 我 们 需要 逐步 脱离 一 般 情 况 下 对 界面 的 认 知 ， 而 是 去 
看 一 看 和 用 户 交 流 的 其 他 方式 。 在 复 选 框 和 滑动 条 控件 领域 之 外 ， 我 们 
使 用 各 种 通常 情况 下 和 用 户 体 验 并 无 直接 联系 的 事物 ， 例 如 电子 邮件 、 
博客 、Newsletter、Screencast， 还 有 屏幕 截图 。 
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所 有 这 些 都 是 我 们 和 顾客 保持 联系 的 绝 佳 工具 。 
为 改变 而 设计 的 第 一 步 就 是 评 佑 如 何 发 布 更 新 。 


我 们 是 否 将 在 某 个 明确 的 时 间 发 布 更 新 ? 如 果 不 是 ， 能 和 否 设 定 一 个 ? 更 
新 会 影响 你 所 有 的 顾客 吗 ? 还 是 只 有 其 中 一 部 分 ? 在 更 新 和 那些 愿意 买 
单 的 用 户 直 接见 面 之 前 ， 进 行 一 些小 的 测试 是 否 会 更 有 好 处 ? 


为 发 布 更 新 设 定 明确 的 时 间 意 味 着 你 能 给 顾客 准确 的 信息 ， 而 不 是 在 某 
天 早上 突然 吓 他 们 一 跳 。 在 更 新 发 布 给 每 一 个 用 户 之 前 ， 先 在 一 小 部 分 
人 中 试用 ， 这 将 会 让 你 有 时 间 修 正 “ 最 后 关头 ”的 小 Bug。 把 新 功能 
告诉 那些 比 其 他 人 更 喜欢 发 现 隐 藏 宝藏 的 “积极 用 户 ” 能 够 获得 你 最 好 
也 最 忠诚 的 顾客 的 感激 ， 而 且 让 他 们 感觉 自己 受到 了 特殊 待遇 。 


一 旦 你 决定 了 如 何 发 布 ， 那 么 就 是 时 候 通 知 他 们 了 。 


从 一 封 简单 的 电子 邮件 开始 ， 把 它 发 送 给 每 一 个 注册 过 的 人 。 那 些 积极 
用 户 会 很 感 兴趣 然后 告诉 自己 所 有 的 朋友 。 普 通用 户 可 能 也 是 你 最 大 的 
用 户 群 体 ， 则 会 获得 足够 的 预警 ， 知 道 有 些 事情 马上 要 发 生 改 变 了 。 那 
些 曾 注册 过 而 又 废弃 了 ， 但 又 没有 删除 账号 的 用 户 ， 有 时 候 我 们 称 之 为 
“沉睡 者 ” 则 会 被 提醒 而 再 一 次 光临 你 的 网 站 。 


而 这 只 是 一 封 简单 的 电子 邮件 。 就 像 这 样 : 
John: 

































































我 们 将 于 10 月 3 日 为 AcmeWidgets.com 做 一 次 重要 的 更 新 。 
现在 ， 你 可 以 做 下 面 这 些 事 。 

口 和 其 他 人 一 起 分 享 你 上 传 的 图 片 。 

口 为 你 看 到 的 图 片 发 表 评 论 。 

口 如 果 想 深入 了 解 某 些 图 片 ， 你 还 可 以 和 它们 的 主人 联系 并 交 


流 。 


如 果 想 了 解 具 体 情 况 ， 欢 迎 随时 过 来 逛 逛 : www.acmewidgets. 
com/ update/tour。 
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这 些 变动 都 是 自动 的 ， 你 无 需 做 任何 事情 。10 月 3 日 ， 和 往常 
一 样 登录 就 能 开始 享受 乐趣 。 


我 们 感谢 你 到 现在 所 做 的 一 切 ， 而 且 很 期 待 你 在 新 AcmeWidg- 
ets 上 的 作为 ! 


你 真诚 的 ， 
AcmeWidgets 开发 团队 


"n 


通告 区 


下 一 步 ， 在 网 站 首页 上 添加 一 些 关 于 更 新 的 预告 信息 。 简 单 又 不 但 事 ， 
但 是 仍然 能 够 引起 注意 。 


以 下 是 我 用 过 几 次 的 小 伎俩 ， 用 于 各 种 类 型 的 通告 。 我 称 之 为 ， 通 告 区 。 
《我 是 个 天 才 ， 不 是 吗 ? ) 


或 许 你 可 以 在 我 的 个 人 网 站 http://rhjr.net 上 找到 它 ， 如 图 28-1 所 示 。 











robert hoekman, jr. designing the obvious (new riders) 

p———ÉÁ—— Designing the Obvious explains the qualities of great 

[77] applications and how to successfully reproduce them. 
Read the book ... 








图 28-1 


基本 上 ， 它 是 一 个 沿 着 页 面 项 部 的 黑色 横 条 ， 里 面包 含 着 某 个 通知 ， 并 
且 通 常会 链接 到 另 一 个 信息 更 详细 的 页 面 。 


它 简单 、 清 晰 ， 而 且 有 效 ， 而 这 正 是 我 们 想 要 的 结果 。 


使 用 什么 颜色 完全 取决 于 你 自己 ， 只 要 确保 它 能 和 页 面 上 其 他 颜色 区 分 
开 来 ， 因 为 这 样 才能 引起 注意 。 
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C28.2 界面 元 素 的 再 利用 资源 


Designing the Obvious 一 书 中 ， 我 谈 到 “欢迎 ”界面 能 帮助 用 户 快速 熟悉 
某 个 产品 。 同 时 我 也 提 到 在 初级 用 户 变 成 中 级 用 户 、 不 再 需要 提速 协助 
之 后 ， 这 些 元 素 仍 然 可 以 在 新 功能 或 类 似 情况 中 再 利用 。 

图 28-2 是 我 曾 用 过 的 例子 。 不 ， 它 没有 说 “欢迎 ” 它 的 目的 是 为 用 户 
介绍 页 面 ， 只 是 处 于 绝 大 多 数 情 况 下 “欢迎 ”文本 所 处 的 位 置 而 已 。 而 
内 容 要 么 是 说 明 性 文字 ， 要 么 是 营销 广告 语 。 


My Account! 


In the My Account screen, you can: 
* Change your password 
* Edit your billing information 
* Change your Email address 


Note: This information may take up to 24 hours to update in our system. 





L] Dont show this window anymore 





图 28-2 


而 以 下 则 是 如 何 再 次 利用 它 让 用 户 了 解 即将 到 来 的 变动 ， 如 图 28-3 所 
示 。 





New features! (x) 


We've added a few things to AcmePhotos to make your experience even better. 
Now you can: 


e Send a friend a link to a gallery by email 
e Order prints in 3 easy clicks 
* Upgrade your subscription plan to get free prints 


Learn more about these new features and get started today! 





L] Don't show this window anymore 








图 28-3 
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很 简单 ， 对 吧 ? 用 户 已 经 熟悉 了 这 个 界面 ， 因 为 他 们 在 最 开始 访问 的 时 
候 就 见 过 它 。 而 再 次 让 它 弹 出 来 将 会 非常 引 人 注 意 ， 而 且 向 用 户 传达 出 
它 可 能 包含 了 重要 信息 。 


你 还 需要 创建 一 个 页 面 ， 包 含 关 于 网 站 更 新 所 有 的 细节 ， 然 后 将 该 页 面 
和 这 个 界面 或 者 通告 区 进行 链接 。 


为 改变 而 设计 的 好 处 远 远 超过 了 实现 它 所 付出 的 时 间 和 精力 。 这 些 措施 
都 很 简单 ， 但 它们 都 会 深刻 地 影响 到 在 更 新 发 布 当 天 你 的 网 站 是 否 能 获 
得 认可 。 

不 管 发 生 什么 ， 不 要 在 某 个 星期 二 早晨 拿 一 次 天 翻 地 莉 的 变动 去 惊吓 你 
的 顾客 。 让 他 们 了 解 将 要 发 生 什 么 ， 这 样 他 们 才能 为 变动 做 好 准备 ， 为 
之 兴奋 ， 而 且 开始 再 一 次 地 谈论 你 的 产品 。 
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现实 生活 中 说 再 见 总 是 很 悲伤 ， 但 当 你 面 对 某 个 Web 应 用 时 则 不 会 
容易 就 能 单 击 那个 魔力 非凡 的 Log Out 链接 〈 或 者 Logout， 例 如 在 第 3 
章 谈 到 的 网 站 ) 然后 上 路 离开 ， 而 且 也 很 容易 一 去 就 再 也 不 回头 。 


事实 情况 是 ， 绝 大 部 分 人 并 不 是 纯粹 为 了 好 玩 才 使 用 Web 应 用 的 。 他 们 
这 样 做 是 为 了 完成 一 些 事情 然后 继续 回 到 他 们 的 生活 中 去 。 换 句 话 说， 
大 多 数 人 的 主要 目的 是 从 某 个 网 站 离开 。 实 际 上 ， 我 们 之 前 的 每 一 章 都 
在 讨论 如 何 让 人 们 能 更 快 、 更 有 效 而 且 更 有 自信 地 完成 事情 ， 这 样 他 们 
才能 更 快 地 离开 网 站 。 在 这 里 逗留 的 时 间 越 长 ， 他 们 的 满意 程度 就 会 越 
低 。 


但 是 作为 设计 师 ， 我 们 的 目标 难道 不 是 劝说 人 们 逗留 的 时 间 再 长 一 点 
uj? 


是 的 ， 没 错 。 但 是 这 不 能 靠 让 人 们 陷于 复杂 的 交互 和 让 事情 变 得 困难 来 
实现 。 它 应 当 靠 设计 一 系列 令 人 愉快 的 瞬间 ， 让 用 户 对 产品 感觉 良好 来 
实现 。 所 以 让 用 户 逗 留 的 最 好 方法 是 帮助 他 们 尽 可 能 快 而 且 毫 不 费力 地 
离开 网 站 ， 这 多 少 带 点 讽刺 意味 。 


从 页 面 版 式 到 拖 放 交互 ， 迄 今 为 止 我 们 已 经 探讨 了 如 何 让 事情 变 得 既 简 
单 又 有 效 的 各 种 方法 。 我 们 辟 励 用 户 探索 网 站 、 吸 引 他 们 注册 、 人 带领 他 
们 完成 复杂 的 表单 、 教 导 他 们 使 用 不 熟悉 的 功能 ， 甚 至 从 长 远 角度 来 
理 他 们 的 数据 信息 。 


最 后 一 步 ， 我 们 要 探究 当 他 们 决定 离开 网 站 时 会 发 生 什 么 ， 不 管 是 暂时 
还 是 永久 的 离开 。 
本 书 最 后 一 部 分 ， 我 们 将 重 溯 用 户 Sign-out( 退 出， 的 过 程 ， 讨 论 如 何在 
人 们 离开 网 站 一 段 时 间 后 鼓励 他 们 再 次 光临 。 我 们 还 各 讨论 在 他 们 决定 
永 不 再 来 时 ， 又 应 当 如 何 处 理 那 些 即将 永久 消失 的 账户 。 
离别 或 许 是 既 甜 蜜 又 误伤。 但 对 交互 设计 来 说 ， 即 使 是 离别 的 瞬间 ， 同 
样 也 是 为 顾客 形成 持久 印象 的 契机 。 
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从 Web 应 用 中 Sign-out (退出) 从 来 都 不 是 一 个 复杂 的 任务 ， 但 是 有 些 
网 站 却 把 它 弄 得 远 比 需要 的 更 复杂 ， 而 且 并 不 是 很 多 网 站 都 能 利用 Sign- 
out 的 机 会 来 动员 用 户 再 次 返回 。 




















通常 来 说 ，Sign-out 只 是 单 击 网 页 顶部 角落 里 的 某 个 命令 链接 而 已 。 


例如 在 Blinksale 中， 你 会 回 到 Sign-in 的 页 面 。 这 种 不 错 的 方法 被 称 作 
Closed System ( 封闭 体系 )， 也 就 是 说 除非 Sign-in， 否 则 你 无 法 看 到 该 
应 用 的 任何 部 分 。 而 Srapblog“ 则 是 男 一 种 情况 ， 单 击 Sign Out 后 你 将 会 
被 送 回 该 站 点 为 非 登录 用 户 所 显示 的 主页 中 去 。 这 也 是 一 种 很 好 的 解决 
方案 ， 被 称 为 Open System ( 开放 体系 ) 在 没有 Sign-in 的 情况 下 你 仍 
然 能 够 看 到 网 站 的 一 部 分 内 容 。 


当然 ， 并 不 是 所 有 的 Sign-out 过 程 都 这 么 清晰 。 


C29.1 化 简 为 繁 





















































比方 说 LinkedIn “的 Sign-out 过 程 ， 会 让 你 疑惑 是 不 是 自己 只 进行 了 一 
半 。 单 击 Sign Out 链接 之 后 ， 你 将 会 看 到 一 段 文 字 ， 大 概 是 如 下 这 个 意 


FH. 
©: 

















(D Blinksale 是 一 个 专业 提供 在 线 记 账 及 单据 服务 的 网 站 。 网 址 为 http://www.blinksale. 
com/。 译 者 注 
(2) Srapblog 是 一 个 在 线 建 立 多 媒体 剪贴 短 的 网 站 ， 用 户 能 发 布 、 共 享 并 且 能 得 到 打印 
版 本 。 网 址 为 http:Wwww.scrapblog.com/。 一 一 译 者 注 
(3) LinkedIn 是 一 个 方便 用 户 与 同事 和 同学 保持 联系 的 网 站 ， 也 提供 了 各 种 寻求 工作 和 
商业 合作 的 机 会 。 网 址 为 http:/www.linkedin.com/。 一 一 译 者 注 
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现在 您 已 经 Sign Out T 
您 的 浏览 器 将 会 记 住 您 是 谁 ， 因 此 您 仍然 可 以 查看 您 自己 的 主页 。 
然而 ， 如 果 想 查看 或 者 改变 您 的 私人 信息 ， 您 需要 再 次 登录 。 


这 些 后 面 跟 着 一 个 标记 为 Sign Out Completely“〈 完 全 退出 ) 的 按钮 ， 并 且 
附带 说 明 “ 当 你 单 击 这 个 按钮 时 ， 浏 览 器 将 不 会 记录 任何 关于 你 的 信息 ， 
你 必须 输入 电子 邮件 地 址 和 密码 才能 重新 使 用 系统 。” 


不 ， 我 没有 开玩笑 。 


除了 极其 兄长 之 外 ， 这 些 说 明文 字 还 会 让 你 感觉 自己 做 错 了 什么 。 虽 然 
你 已 经 Sign-out 了 ， 现 在 却 可 能 会 想 是 否 还 得 完全 地 Sign-out。 


我 们 都 倾向 于 在 页 面 上 寻找 按钮 和 链接 ， 同 时 忽略 挥 绝 大 部 分 说 明文 字 。 
所 以 可 能 很 多 人 看 到 这 个 Sign Out Completely 的 按钮 都 会 有 些 紧 张 。 看 
到 它 之 后 ， 你 可 能 会 觉得 自己 必须 阅读 这 些 说 明 ， 好 和 弄 清楚 到 底 发 生 了 
什么 。 如 果 不 是 因为 这 个 按钮 让 我 们 感到 自己 的 安全 受到 了 威胁 ， 可 能 
我 们 根本 不 会 去 理 昭 那些 说 明文 字 。 


男 一 个 例子 中 ， 我 们 也 能 看 到 不 必要 的 宛 长 文字 。 在 亚利桑那 州 某 个 银 
行 的 网 站 上 ， 当 你 Sign-out 时 会 进入 一 个 页 面 ， 里 面 是 这 样 陈述 的 : 


感谢 您 使 用 [Acme] 在 线 银 行 系统 ! 您 已 经 成 功 退 出 了 [Acme] 
系统 。 


如 果 您 希望 重新 登录 [Acme]， 或 者 回 到 [Acme] 网 站 ， 请 单 击 
下 方 的 Back to Login 按钮 。 否 则 ， 请 关闭 您 的 浏览 器 窗口 以 便 
结束 当前 对 话 。 


后 面 有 一 个 Back to Login 按钮 。 


因为 登录 界面 位 于 网 站 的 主页 面 上 ， 所 以 你 需要 通过 主页 面 进入 站 点 并 
且 在 主页 面 上 Sign-in。 但 是 当 你 Sign-out 时 ， 却 必须 单 击 某 个 按钮 才能 
回 到 主页 面 ， 而 这 又 没什么 明显 的 理由 。 


而 且 出 于 某 些 奇怪 的 理由 ， 网 站 的 设计 师 认 为 你 需要 用 整整 两 段 文字 才 
能 理解 这 个 Back to Login 按钮 ! 更 糟 的 是 ， 他 们 还 假设 所 有 用 户 都 能 明 
白 那 个 神秘 的 “结束 当前 对 话 ” 是 什么 意思 。 
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为 什么 如 此 简单 的 事情 却 被 弄 得 如 此 复杂 ? 


在 这 种 种 混乱 之 外 ， 只 有 极 少数 网 站 才能 做 到 把 Sign-out 当 作 一 个 传达 
言 息 或 营销 的 契机 。 


029.2 动员 用 户 返 回 


我 设计 Sign-out 流程 时 ， 总 是 要 么 用 Sign-out， 要 么 用 Open-system Sign- 
out。 但 在 此 基础 上 ， 我 也 希望 能 找到 方法 鼓励 和 从 是 用 户 再 度 光 临 网 站 。 


Gmail Æ 3X — A EFR. Sign-out 时 ， 你 会 回 到 Sign-in 页 面 ， 但 
同时 你 也 会 看 到 一 些 他 们 希望 你 能 深入 了 解 的 功能 。 在 这 种 情况 下 ， 
Google 的 Sign-in 页 面 兼 饰 两 角 ， 既 是 Web 应 用 的 首页 面 ， 同 时 又 把 额 
外 的 空间 用 于 行销 推广 ， 如 图 29-1 所 示 。 





Gmail waesewcman 
byGoogle BETA 


A Google approach to email. 
Gmail is a new kind of webmail, built on the idea that email can be more peg A 
intuitive, efficient, and useful. And maybe even fun. After all, Gmail has: Sign in to Gmail with your 
Google Account 
Less spam 
Keep unwanted messages out of your inbox with Google's Usemame: D 5 1] 
innovative technology 
Password: 
Mobile access 
Read Gmail on your mobile phone by pointing your ja aromia me on this 
phone's web browser to http://gmail.com/app. Leam nus 
more Sign in 
rote of spans Lcannot access my account 
Over 6190.080913 megabytes (and counting) of free 
storage so you'll never need to delete another message. 
[: ; What's your Gmail story? Sign up for Gmail 
g cess ze rom Ce and share your own AboutGmail Newfeatures! 





a R Watch the video» 





29-1 
在 设计 自己 的 Closed-system Sign-out 流程 时 ， 我 窃取 了 这 个 想法 ， 而 同 
时 也 和 希望 能 更 进一步 。 这 些 系统 中 的 Sign-in/out 页 面 通常 都 没有 很 多 内 
容 ， 因 此 完全 可 以 把 那些 空白 区 域 视 为 用 于 市 场 营 运 的 良机 。 
我 由 一 个 最 典型 的 Sign-in 页 面 开始 ， 用 户 Sign-out 后 也 将 回 到 这 里 。 它 
包括 用 户 名 和 密码 的 输入 域 、 一 个 是 否 记 住 用 户 Log-in 信息 的 选项 ， 以 
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及 一 个 找 回 遗失 密码 的 命令 链接 。 这 些 元 素 都 被 套 在 一 个 框 体 中 ， 在 页 
面 居中 显示 。 见 图 29-2. 


Username: 


L | 


Password: 
[C] i forgot my password 


(wf. Remember me for 2 weeks 











图 29-2 
然后 ， 我 把 这 整个 玩意 向 左 移动 ， 开 辟 出 一 块 空间 放置 行销 推广 的 内 容 。 
设计 的 时 候 我 只 是 确立 了 一 个 模板 ， 无 论 什 么 样 的 信息 都 可 以 放 在 这 里 ， 
用 以 描述 产品 的 各 项 优点 。 如 图 29-3 所 示 。 








Username: Did you know? 
L A With Acme Photos, you can: 


e Tip #1 goes here 
Password: e Tip #2 goes here 

e Tip #3 goes here 
EE | Iforgot my password e Tip #4 goes here 
e Tip 45 goes here 


Remember me for 2 weeks 
区 To learn more just sign in and hit the "Take a tour" link in 


the upper-right corner of the page. 














图 29-3 


29.2.1 空间 的 再 利用 


如 在 第 28 章 所 讨论 的 “欢迎 ”界面 那样 ，Sign-in 页 面 的 推广 区 域 也 可 以 
重复 使 用 ， 例 如 向 顾客 提供 关于 新 功能 的 信息 。 


为 了 更 详细 地 说 明 ， 我 创建 了 男 一 个 线 框图 版 本 ， 如 图 29-4 所 示 。 
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Drane New in Acme Photos 
: Weve recently added several new features to make your 
一 experience even better! 


Password: e Feature #1 goes here 
* Feature 42 goes here 


EE | forgot my password * Feature #3 goes here 


[Mf Remember me for 2 weeks Learn more about these features! 


To get started, just sign in and start having fun! 











图 29-4 


为 了 限制 可 以 放置 到 区 域 中 的 文本 数量 ， 我 决定 把 该 区 域 设 定 得 相当 小 ， 
仅仅 和 左边 的 Sign-in 界面 一 样 大 。 通 过 这 种 办 法 ， 不 管 是 为 新 的 或 已 有 
功能 做 广告 还 是 其 他 什么 内 容 ， 任 何 使 用 该 区 域 的 人 都 必须 使 用 简短 的 
陈述 或 者 项 目 列表 来 表现 〈 记 住 ， 文 本 越 长 ， 越 没 人 读 )。 

29.2.2 发布 消 息 

Web 应 用 的 Sign-out 流程 完全 可 以 非常 简单 ， 只 需 点 击 一 次 然后 退回 到 
Sign-in 页 面 即 可 。 但 如 果 加 入 一 点 创造 力 ， 这 个 本 来 很 空 的 页 面 也 可 以 
转变 成 一 次 市 场 营销 的 机 会 。 

它 可 以 通过 指出 用 户 尚 未 发 现 的 功能 发 励 用 户 再 次 回 到 站 点 ， 或 者 引导 
用 户 了 解 新 功能 ， 甚 至 可 以 宣布 网 站 新 取得 的 成 就 ， 或 者 其 他 影响 到 整 
个 用 户 群 体 的 新 闻 ， 例 如 发 布 例 行 维护 通知 等 。 

而 正 因为 这 个 页 面 除 此 之 外 再 无 其 他 任何 东西 ， 因 此 与 Web 应 用 中 其 他 
拥挤 的 页 面相 比 ， 文 本 会 更 加 吸引 人 们 的 注意 。 
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尘封 用 户 (Dusty User)， 或 者 如 37signals 在 Signal vs. Noise 〈 信 和 号 与 品 
音 ) 中 的 文章 Waking up the sleepers (唤醒 沉睡 者 ) "里 所 称呼 的 “沉睡 
者 ”， 指 的 是 那些 注册 了 某 个 Web 应 用 或 者 服务 ， 却 又 放弃 了 账户 的 人 。 
这 种 情况 很 有 可 能 发 生 ， 例 如 用 户 对 某 个 产品 厌倦 了 ， 或 者 找到 了 一 个 
更 喜欢 的 蔡 代 品 ， 甚 至 仅仅 只 是 因为 他 们 把 这 个 应 用 给 忘 


到 现在 为 止 ， 我 可 能 已 经 是 上 百 个 Web 应 用 的 “人 尘封 用 户 ” 了 ， 我 相信 
你 也 一 样 。 


那么 作为 设计 者 ， 我 们 应 该 如 何 应 对 这 种 局 面 呢 ? 事实 上 我 们 的 目标 是 
让 用 户 保持 兴趣 和 热情 ， 那 么 我 们 应 该 如 何 让 这 些 沉睡 者 复苏 并 再 度 活 
跃 起 来 呢 ? 


这 是 一 个 我 很 想 回答 的 问题 ， 但 通常 的 思路 认为 ， 这 种 设计 工作 都 是 市 
场 部 门 的 职责 。 广 泛 地 宣传 、 在 电视 和 网 络 上 做 广告 、 提 供 优惠 或 者 其 
他 折扣 ， 这 些 都 是 传统 的 宣传 手段 ， 人 们 认为 它们 足以 让 那些 “尘封 用 
户 ” 行 动 起 来 。 
但 是 ， 尽 管 这 些 营 销 手 段 在 保持 品牌 知名 度 方 面 做 得 很 优秀 (或 者 很 差 
劲 )， 它 们 却 很 少 能 真正 地 鼓舞 用 户 。 吸 引 我 们 注意 的 那些 东西 其 实 非 常 
个 人 化 。 它们 不 是 路 边 广 告 牌 上 不 停 喧嚣 的 宣传 妙 句 ， 而 是 一 些 私 人 信 
息 ， 是 针对 于 我 们 的 需求 而 建立 的 诚 悬 联系。 






























































































































































CD Signal vs. Noise 是 37signals 的 一 个 博客 ， 主 要 内 容 包括 设计 、 用 户 体 验 、 文 化 等 。 
Waking up the sleepers 是 其 中 一 篇 日 志 ， 具 体 网 址 为 http://www.37signals.com/ svn/ 
译 者 注 




















posts/611-waking-up-the-sleepers。 
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换 名 话说， 唤醒 这 些 沉睡 者 绝 不 仅仅 是 市 场 部 门 的 工作 ， 它 同样 也 是 设 
计 师 的 职责 。 毕 竟 ， 和 顾客 沟通 并 且 建 立 联系 ， 在 这 一 点 上 我 们 做 得 最 
好 。 


为 了 更 好 地 描述 这 个 观点 ， 我 设计 了 一 个 解决 方案 清单 ， 对 象 是 一 个 虚 
拟 的 项 目 ， 名 为 Acme Photos (Acme 相册 )。 


030.1 变 总 惰 为 热情 


我 们 抹 去 “尘封 用 户 ” 所 需要 的 工具 ， 有 很 多 其 实 早 就 已 经 存在 ， 而 且 
在 其 他 某 些 情况 下 我 们 已 经 使 用 过 了 。 


比如 说 ， 我 们 很 多 人 都 已 经 发 送 过 Newsletter (邮件 时 事 通 讯 )。 尽 管 
通常 它们 都 被 用 于 公司 的 最 新 报道 或 者 描述 新 功能 ， 但 也 同样 能 够 提醒 
“尘封 用 户 ” 现 在 有 个 好 理由 回 到 网 站 并 开始 再 度 使 用 它 。 


为 了 让 这 种 效果 最 大 化 ， 我 们 可 以 在 Newsletter 中 加 上 链接 进一步 鼓励 
“人 尘封 用 户 ” 进 行 探索 。 此 外 还 可 以 提供 折扣 或 者 其 他 因素 来 吸引 这 些 用 
户 。 以 下 有 一 个 例子 : 


有 一 段 时 间 没 有 使 用 Acme 相册 了 ? 


让 我 们 使 你 相信 这 值得 瞧 一 瞧 ! 我 们 已 经 创建 了 一 系列 短小 而 
有 趣 的 视频 教程 ， 展 示 了 一 些 很 棒 的 新 特性 。 而 且 它 们 都 在 一 
个 地 方 ， 所 以 你 能 很 快 上 手 并 且 了 解 我 们 现在 能 为 您 做 些 什么 。 


了 解 我 们 的 新 特性 ! 


如 果 这 还 不 够 ， 我们 还 愿意 为 你 提供 特殊 优待 。 如 果 现 在 距 你 
上 一 次 登录 账户 已 经 超过 了 1 个 月 ， 我 们 将 在 2 月 底 之 前 为 你 
购买 的 所 有 商品 提供 50% 的 折扣 ! 


只 需 在 付款 时 输入 以 下 推广 码 : 
FEB PROMO 
开始 购物 ! 


明确 地 针对 “人 尘封 用 户 ” 的 需求 ， 同 时 为 他 们 提供 足够 的 动机 ， 我 们 将 吸 
引 那些 摇摆 不 定 的 人 们 发 现 网 站 的 价值 ， 为 自己 的 站 点 提供 第 二 次 机 会 。 
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30.1.1 个 性 化 沟通 

另 一 个 选择 是 发 送 个 性 化 信件 。 例 如 ， 我 最 近 收 到 了 一 封 传统 信件 ， 来 
自 一 个 信用 卡 公司 ， 我 有 一 阵子 没 使 用 那个 账户 了 。 它 用 一 种 幽默 的 语 
调 简 单 地 询问 :“ 咱 们 最 近 干 了 些 什 么 ? 还 是 什么 也 没 干 ? ” 


这 封 信件 的 立意 在 于 ， 它 让 我 知道 该 公司 已 经 注意 到 我 有 一 段 时 间 没 有 
使 用 自己 的 信用 卡 ， 并 且 鼓 励 我 再 次 用 这 张 卡 消费 。 他 们 在 信 中 为 自己 
没 能 让 这 张 卡 体现 出 价值 而 道歉 ， 而 且 提 供 了 一 些 升级 举措 ， 以 确保 我 
能 从 信用 卡 中 得 到 确实 想 要 的 东西 ， 例 如 持 卡 消费 能 获得 的 旅游 及 现金 
回馈 、 信 用 额度 的 提升 ， 以 及 在 线 付款 功能 。 同 时 他 们 还 声明 只 要 我 能 
再 次 成 为 活跃 的 信用 卡 用 户 ， 他 们 愿意 竭尽 所 能 满足 我 的 需求 。 

我 真 的 非常 感激 他 们 ， 特 别 是 因为 我 正在 开始 Miskeeto" 计 划 ， 需 要 一 
张 信 用 卡 为 公司 开支 。 我 不 仅 打 电 话 为 现 有 这 张 卡 办 理 了 升级 ， 还 同时 
申请 了 另 一 张 商务 信用 卡 。 从 那 时 候 起 ， 我 开始 有 规律 地 使 用 这 两 张 卡 ， 
成 为 该 公司 一 个 良好 的 消费 者 。 而 所 有 这 一 切 都 是 因为 他 们 给 我 的 一 封 
信和 吸引 了 我 的 注意 。 


以 下 是 转换 成 电子 邮件 形式 的 一 个 例子 。 
亲爱 的 Maggie: 
我 们 注意 到 你 有 一 段 时 间 没 有 使 用 Acme 相册 了 ， 于 是 怀疑 自己 
做 错 了 什么 。 你 是 不 是 遇 到 其 他 什么 人 了 ? 你 不 再 爱 我 们 了 吗 ? 
我 们 需要 你 再 给 一 次 机 会 ! 
为 了 证 明 自 己 不 变 的 真心 ， 我 们 已 经 创建 了 一 系列 短小 而 有 趣 
的 视频 教程 ， 展 示 了 一 些 很 棒 的 新 特性 。 而 且 它 们 都 在 一 个 地 
方 ， 所 以 你 能 很 快 上 手 并 且 了 解 我 们 现在 能 为 您 做 些 什么 。 
了 解 我 们 的 新 特性 1 
如 果 这 还 不 够 ， 我 们 还 愿意 为 你 提供 特殊 优待 。 如 果 现 在 距 你 
上 一 次 登录 账户 已 经 超过 了 1 个 月 ， 我 们 将 在 2 月 底 之 前 为 你 
购买 的 所 有 商品 提供 50% 的 折扣 ! 











(D WB 15 章 注 。 一 一 译 者 注 
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只 需 在 付款 时 输入 以 下 推广 码 : 
EB PROMO 
开始 购物 | 


我 们 渴望 让 你 成 为 一 位 开心 的 顾客 。 如 果 这 封 邮件 没有 成 功 ， 
a iis E 为 你 做 些 什 么 。 通 过 以 下 链接 向 我 们 发 条 消 
， 你 将 能 和 真人 接触 并 且 进 行 真 实 的 交谈 ， 让 我 们 知道 如 何 


和 Acme 相册 的 职员 交谈 | 
我 们 希望 很 快 能 再 次 见 到 你 。 真 的 。 我 们 想念 你 。 





你 真诚 的 , 
Acme 相册 团队 
就 像 你 所 看 到 的 ， 我 在 这 封 电 子 邮 件 里 站 在 一 种 失恋 的 角度 。 议 谐 和 幽 
默 对 于 抓 住 用 户 注意 力 来 说 相当 有 帮助 。 


最 重要 的 是 ， 我 们 发 出 去 的 讯息 应 该 富有 人 人 情 味 ， 而 不 是 呆板 的 、 充 斥 
着 行业 辞 令 和 广告 语气 的 营销 套话 。 这 类 讯息 应 当 是 一 种 会 话 般 的 口吻 ， 
完全 聚焦 于 接受 方 ， 而 不 是 我 们 自己 。 

当然 ， 由 于 这 两 个 例子 都 包含 了 通 向 视频 教程 的 链接 ， 我 方案 清单 中 下 
一 项 就 是 要 创建 一 堆 短 小 精湛 的 Screencast。 在 第 8 章 我 们 谈 到 过 如 何 使 
用 视频 作为 辅助 ， 所 以 这 里 我 不 会 再 涉及 那些 细 市 。 


这 些 东西 应 该 能 有 帮助 ， 但 我 们 怎样 才能 弄 清 楚 这 些 用 户 当 初 被 尘封 的 
原因 呢 ? 


30.1.2 ”调查 


首先 ， 我 们 可 以 问 他 们 为 什么 离开 这 么 久 。 为 了 实现 这 一 点 ， 我 们 可 以 
在 解决 方案 清单 里 面 加 上 调查 。 
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使 用 例如 SurveyMonkey "这 类 的 服务 ， 我 们 可 以 轻松 地 开展 客户 对 Acme 
相册 感觉 如 何 的 小 调查 ， 并 和 优惠 或 其 他 奖励 项 目 一 起 发 送 给 “尘封 用 
户 ”。 


这 种 调查 的 完成 率 给 庸 置 括 会 很 低 。 但 即使 具有 很 小 一 部 分 人 回应 ， 我 
们 也 可 能 从 中 学 到 很 多 东西 ， 比 如 可 以 了 解 在 应 用 中 还 差 人 什么， 或 者 是 
哪里 让 这 些 用 户 失望 。 


通过 调查 ， 我 们 能 够 看 到 用 户 的 各 种 倾向 ， 并 根据 反馈 考虑 如 何 改变 设 
hs 
但 调查 并 不 是 最 后 一 步 模 。 形 象 一 点 来 说 ， 我 们 也 可 以 和 用 户 坐 下 来 边 
"B. 


30.1.3 ”对 话 的 机 会 


正如 Cluetrain Manifesto 一 书 的 作者 所 说 的 ,“ 市 场 即 会 话 ”。 但 只 有 很 
少 的 公司 真正 去 聆听 他 们 的 客户 以 及 从 事 真 正 的 会 话 。 


为 了 让 这 种 会 话 开展 下 去 ， 我 们 可 以 为 “人 尘封 用 户 ” 提 供 一 个 机 会 与 真 
正 的 开发 团队 成 员 交谈 ， 并 把 他 们 的 关注 点 和 愿望 描述 出 来 。 这 也 可 以 
通过 电子 邮件 形式 实现 ， 因 此 重要 的 只 是 找到 方法 让 它 更 容易 一 些 。 


这 可 以 很 简单 ， 例 如 创建 一 个 电子 邮件 地 址 ， 并 承诺 用 户 发 送 的 每 一 条 
评论 都 会 得 到 真人 回应 。 但 我 们 还 可 以 走 得 更 远 。 例 如 ， 我 们 可 以 邀请 
那些 “尘封 用 户 ” 成 立 一 个 小 组 ， 目 标 聚 焦 于 产品 日 后 的 改进 工作 。 

这 些 用 户 可 以 参与 论坛 或 者 讨论 列表 ， 和 内 部 员工 一 起 讨论 他 们 希望 看 
到 的 变化 。 为 了 补偿 他 们 付出 的 时 间 和 精力 ， 我 们 可 以 提供 商品 折扣 作 
为 参与 活动 的 酬劳 。 















































(D SurveyMonkey 是 一 个 在 线 问 卷 调 查 网 站 ， 提 供 各 种 问卷 模板 ， 可 定制 性 较 高 ， 
能 将 调查 结果 以 PDF 格式 存档 。 用 户 只 需 将 问卷 的 地 址 以 链接 形式 添加 到 网 站 、 
件 等 处 ， 就 能 通知 被 调查 者 填写 。 而 且 只 要 调查 对 象 低 于 100 就 无 需 支付 费用 。 
时 也 支持 中 文 。 网 址 为 http://www.surveymonkey.com/。 一 一 译 者 注 
(2 Cluetrain Manifesto〈( 线 车 宣言 )，Weinberger、Searls 和 Levine 于 1999 年 合 著 。 中 
文 版 名 为 《市 场 就 是 谈话 : 影响 传统 企业 思维 的 95 个 观点 》 中 信 出 版 社 出 版 。 有 

人 认为 该 书 实际 上 是 Web 2.0 浪潮 的 先知 ， 甚 至 其 作者 也 可 归 入 信息 资本 主义 的 伟 
大 预言 者 行列 。 该 书 网 站 为 http:/www.cluetrain.com/， 可 免费 阅读 原版 内 容 。 
一 一 译 者 注 
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为 了 创造 一 种 “排外 ”的 感觉 ， 我 们 可 以 限制 小 组 的 编制 ， 例 如 ，100 位 
用 户 。 我 们 可 以 在 向 所 有 “人 尘封 用 户 ” 发 送 的 电子 邮件 邀请 中 解释 小 组 
的 细节 ， 然 后 告诉 他 们 只 有 100 个 人 将 会 被 选中 。 


排外 感 将 会 激发 兴趣 。 把 小 组 限制 为 100 个 人 将 会 让 用 户 感 到 自己 正在 
参与 很 特殊 的 活动 。 同 时 这 也 会 把 小 组 的 规模 控制 在 可 管理 的 范围 内 ， 
长 远 来 说 会 对 公司 真正 起 作用 。 而 另 一 方面 ， 那 些 未 获 选 加 入 小 组 的 用 
户 也 会 认识 到 公司 正在 采取 措施 以 图 打动 消费 者 。 


30.1.4 不 要 做 得 太 过 火 
考虑 了 上 述 一 切 之 后 ， 成 功 的 关键 在 于 不 要 做 得 太 过 火 。 


如 果 茶 个 用 户 只 是 想 独自 采 着 ， 我 们 可 能 很 容易 就 会 因为 过 多 的 打扰 而 
冒犯 他 ， 甚 至 会 迫使 他 注销 原本 只 是 放任 不 管 的 账户 。 与 此 同时 我 们 也 
不 希望 让 人 有 抓 着 稻草 不 放 的 感觉 ， 所 以 这 里 需要 制定 一 些 规则 。 


当 某 个 账号 被 尘封 了 相对 很 长 一 段 时 间 之 后 ， 我 们 才 应 该 发 送 第 一 封 通 
知 他 们 查看 新 功能 的 电子 邮件 。 如 果 是 那 种 通常 需要 每 天 使 用 的 产品 ， 
电子 邮件 应 当 发 送 给 那些 至 少 1 个 月 没有 Sign-in 的 用 户 。 而 像 我 们 的 
Acme 相册 这 种 平均 每 周 登录 一 次 的 产品 ， 电 子 邮件 应 当 发 送 给 3 个 月 没 
有 Sign-in 的 用 户 。 


这 里 并 没有 什么 数学 公式 ， 而 只 是 根据 使 用 频率 推算 的 一 个 大 概 值 。 


而 下 一 步 ， 在 第 一 封 电子 邮件 发 送 一 至 两 周 之 后 ， 再 发 送 一 封 更 个 人 化 
的 电子 邮件 ， 比 如 刚 讲 到 的 那个 例子 。 这 个 额外 的 讯息 将 会 进一步 鼓励 
用 户 ， 因 为 第 一 封 电子 邮件 还 记忆 犹 新 。 如 果 某 位 用 户 到 此 时 还 是 什么 
也 不 做 ， 我 们 最 好 就 让 他 一 个 人 采 着 吧 。 

至 于 “人 尘封 用 户 ” 们 构成 的 小 组 ， 明 显 地 一 年 只 能 组 建 一 到 两 次 ， 每 个 
小 组 可 以 持续 数 个 月 。 

关于 小 组 的 电子 邮件 可 以 说 明 将 会 为 期 3 到 4 个 月 ， 而 当 本 期 结束 后 将 
会 再 组 建新 的 一 个 小 组 。 同 时 也 可 以 说 明成 员 并 没有 义务 必须 得 表现 活 
路 ,但 是 那些 频繁 的 参与 者 将 会 绪 得 更 多 的 奖励 ， 例 如 更 低 的 折扣 等 。 
如 果 每 年 可 以 组 建 并 维持 2 次 这 种 小 组 ， 邀 请 的 电子 邮件 应 当 在 第 一 次 
讨论 之 前 两 周 左右 时 间 发 送出 去 。 那 些 接受 邀请 的 人 需要 这 段 时 间 来 重 
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新 熟悉 产品 ， 甚 至 还 有 可 能 向 自己 的 朋友 提 及 这 个 公司 能 做 这 么 一 件 事 ， 
给 人 的 感觉 棒 极 了 。 

通过 折扣 、 山 默 庶 谐 的 讯息 ， 以 及 提供 和 真正 开发 团队 成 员 关 于 产品 进 
行 交 流 的 机 会 ， 那 些 “ 人 尘封 用 户 ” 将 会 有 足够 的 契机 对 产品 重新 产生 兴 
趣 。 

最 后 ， 所 有 这 些 都 是 有 效 的 客户 服务 行为 。 每 一 个 设计 的 决定 、 每 一 次 
会 话 、 每 一 篇 博客 日 志 、 评 论 、 电 子 邮 件 、 电 话 等 ， 它 们 都 是 为 了 提供 
良好 的 客户 服务 。 

做 到 这 些 ， 你 就 能 收获 忠诚 。 
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令 人 悲哀 的 是 ， 并 不 是 每 个 人 都 热爱 我 们 的 劳动 成 果 ， 不 管 它 有 多 好 。 
我 知道 这 一 点 令 人 不 快 ， 但 它 是 事实 。 哪 怕 我 们 做 了 自己 所 能 做 的 一 切 
来 劝 服 用 户 注册 ， 设 计 出 不 言 而 喻 的 交互 和 说 明 来 教导 他 们 使 用 产品 ， 
为 产品 提供 大 量 的 价值 ， 并 且 让 数据 管理 尽 可 能 地 轻松 人 简单， 甚至 尽力 
消除 那些 尘封 的 用 户 。 但 还 是 有 很 多 时 候 ， 客 户 离开 了 就 再 也 不 回头 。 


民 管 这 是 一 个 悲伤 的 时 刻 ， 就 像 卫 辱 柱 上 的 标记 ， 但 我 们 仍然 无 法 知道 
它 到 底 何 时 会 发 生 。 并 没有 实时 的 报警 器 能 告诉 我 们 某 人 在 什么 时 候 会 
除 目 己 的 帐户， 我 们 也 无 法 趴 在 他 们 的 肩头 目击 导致 这 一 宿命 般 瞬 间 
的 体验 到 底 是 什么 。 相 反 的 ， 它 的 发 生 超越 了 我 们 的 知识 。 我 们 所 能 万 
到 的 只 是 那些 为 了 衡量 自己 进展 而 收集 的 数据 ， 而 它们 把 这 些 我 们 赖 以 
生计 的 客户 简化 成 了 一 系列 数字 和 图 表 。 


就 像 在 Web 应 用 里 的 其 他 所 有 东西 一 样 ， 我 们 挽留 客户 的 最 后 防线 仍然 
需要 自动 化 。 只 有 这 样 系统 才能 帮 我 们 工作 ， 我 们 才能 有 时 间 采 在 家 里 
看 看 The Daily Show with Jon Stewart Z 2th a sis H o 


而 最 重要 的 是 ， 我 们 需要 优雅 得 体 地 应 付 这 种 状况 。 这 听 上 去 似乎 有 些 
违反 常理 ， 然 而 遗弃 一 个 账户 本 来 就 应 该 像 其 他 任何 事情 一 样 简 单 容 易 。 
于 每 一 款 应 用 程序 面临 的 挑战 都 各 有 不 同 ， 而 且 它 们 的 目的 和 领域 也 
不 尽 相 同 ， 所 以 我 认为 与 其 只 讲 一 个 单独 的 故事 ， 还 不 如 针对 自己 曾经 
面 对 的 各 种 情况 举 一 些 实例 要 来 得 更 有 效果 。 



































































































































































































































































































































































































































CD The Daily Show with Jon Stewart( 乔 恩 每 日 脱口 秀 ) 简称 The Daily Show， 每 周一 
至 周 四 晚 11 点 首播 。Daily Show 不 同 于 传统 的 BBC News 或 CBS Fox CNN 的 每 
日 新 闻 栏目 ， 而 是 从 搞笑 的 角度 演绎 每 日 国内 外 发 生 的 重大 新 闻 。 每 期 除了 邀请 
嘉宾 做 访谈 ， 还 有 很 多 有 趣 的 单元 ， 整 个 节目 笑 声 不 断 。 该 栏目 网 址 为 http://www. 
thedailyshow. com/。 译 者 注 
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优雅 地 失败 





不 管 是 何 种 情况 ， 我 都 尽量 避免 在 任何 时 候 让 客户 感到 自己 受到 了 限制 。 





我 不 知道 是 


FATAH 
































fi 


一 件 正确 的 事 。 
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以 下 是 我 的 建议 。 


31.1.1 
首先 ， 





打点 行李 
让 客户 能 为 自 


ri 


有 务 或 协议 的 用 户 会 感到 
因为 没有 有 效 的 方法 将 六 
慨 是 让 某 人 说 你 坏话 极为 有 效 的 方法 之 
受到 限制 ， 
"的 战略 可 能 对 


而 愤 
F 何 时 候 发 觉 
时 间 ， 反 而 会 马上 逃脱 。 
来 说 有 效果 ， 












































这 种 困 住 用 





但 对 网 络 来 说 绝 无 可 能 


即使 我 们 在 挽留 客户 的 战役 中 失败 了 ， 
这 样 不 仅 能 避免 让 我 
会 让 客户 对 我 们 留 下 好 的 印象 。 
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人 数据 的 应 用 








程序 ， 
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如 图 31-1 所 示 。 


生成 一 个 XML 文件 并 发 
就 处 于 极 易 访 问 的 账户 页 面 中 ， 
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去 过 于 绝望 ， 























己 打 点 行李 ， 这 点 非常 重要 。 例 如 茶 个 用 于 管理 
日 后 可 能 的 注销 行为 提供 一 种 可 靠 的 保留 信 
开始 根本 就 不 会 感 兴趣 。 


小 型 项 目 以 及 搜集 内 容 的 Backpack ^ (37signals 开发 ) 
了 Export Your Data (4 
需 单 击 这 个 链接 ， 你 的 Backpack 页 面 
送 到 你 的 电子 邮件 中 去 。 
来 提升 或 缩减 自 
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或 者 设置 其 他 账户 信息 。 























(D Backpack (HE) 是 一 款 信 息 组 织 、 
户 管理 手中 的 项 目 ， 
该 软件 





能 帮助 用 
的 数据 。 
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这 意味 着 





日 历 、 工 作 安 排 的 在 线 软件 。 


尔 无 需 任 何 努 力 就 能 取消 自 








还 能 从 许 许多 多 的 有 | 
为 http://www.backpackit.com/。 一 一 译 者 注 
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没有 隐藏 页 面 ， 没 有 复杂 的 步骤 ， 只 要 在 任何 一 个 Backpack 页 面 上 进行 
一 系列 单 击 操作 ， 你 就 能 导出 所 有 的 数据 然后 取消 自己 的 账户 。 





























Export your data 
Export your data to XML format (images & files are not included) 





Cancel your account 

Cancelling your account will immediately and permanently delete all data in your account. 
I understand and I'd still like to cancel my account (for your safety, you must confirm this 
action on the next screen). 








图 31-1 


知道 很 容易 取消 Backpack 账户 这 一 事实 ,会 让 人 们 在 一 开始 就 愿意 接触 
这 球 应 用 程序 。 由 于 转换 所 需 的 代价 (选择 其 他 应 用 用 户 所 需 花 费 的 时 
间 和 人 金钱) 非常 低廉， 用 户 从 开始 使 用 产品 时 就 感觉 很 舒适 


Google Reader 是 一 葡 博 客 阅 读 器 程序 ， 能 让 你 导出 自己 收藏 的 所 有 RSS- 
feed 的 URL， 如 图 31-2 所 示 。 你 可 以 把 它们 导入 到 另 一 坎 程 序 中 ， 从 中 
断 处 重新 拾 起 一 切 。 很 多 博客 阅读 器 程序 都 文 持 导入 这 种 列表 ， 所 以 你 
完全 可 以 在 一 天 当中 尝试 各 种 阅读 器 ， 逐 一 试用 直到 找到 那个 最 适合 你 
的 为 止 。 

































































Import your subscriptions 
If you are switching from another feed reader, you can import your existing subscriptions into Google Reader. To do 


this, you first have to export your subscriptions in a standard format called OPML. Learn more about exporting your 
subscriptions from another feed reader. 


Select an OPML file: [ Browse... 


Upload 





Export your subscriptions 


Export your subscriptions as an OPML file. lore info. OPML files 











图 31-2 
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而 在 文件 在 线 存储 系统 DropSend 中， 在 你 取消 账户 之 前 所 需要 做 的 只 
是 把 所 有 存储 的 文件 全 部 下 载 到 自己 的 计算 机 里 即 可 。 

31.1.2 BAHI (tif) 并 未 失去 

而 在 上 述 这 些 例子 中 ， 用 户 取消 账户 的 行为 本 身 也 非常 简单 。 


在 Backpack 里 ， 你 只 需 点 击 3 次 就 能 取消 一 个 账户 : Account〈 上 账户 ) 链 
接 、Cancel My Account. 〈 取 消 我 的 账户 ) 链接 ， 以 及 Yes, permanently cancel 
and delete my account《〈 是 的 ， 永 和 久 取 消 并 删除 我 的 账户 )》 确认 按钮 。 


点 击 3 次 ， 你 就 完事 了 ， 再 也 没有 比 这 更 简单 的 了 。 当 然 ， 除 了 Google 
Reader. 
















































































在 Google Reader 里 你 无 需 做 任何 事 。 因 为 Google 提供 了 一 种 Single- 
Sign-On (一 站 式 登 录 ， 简 称 SSO) 的 功能 ， 让 你 能 用 同一 个 用 户 名 和 窗 
码 登 录 所 有 的 Google 服务 。 因 此 不 管 你 使 用 与 否 ，Google Reader 总 是 
处 于 开放 状态 ， 并 且 Google Calendar (Google HJF), Google Documents 
(Google 文件 ) 和 Gmail 都 是 如 此 。 如 果 想 使 用 另 一 款 阅读 器 程序 ， 例 如 
Bloglines2， 仅 仅 只 需 把 你 的 订阅 地 址 导出 为 OPML (Outline Processor 
Markup Language)“ 文 件 ， 然 后 导入 到 Bloglines 里 即 可 。 























而 在 DropSemd 里 ， 也 只 需 单 击 My Account (我 的 账户 ) 标签 页 、Please 
Cancel My Account《〈 请 取消 我 的 账户 ) 链接 ， 然 后 单 击 确认 链接 Cancel 
my account and delete all files〈 取 消 我 的 账户 并 删除 所 有 文件 )。 


不 管 是 什么 应 用 程序 ， 客 户 离开 都 应 该 是 一 件 非 常 简单 的 事 























。 一 直 以 来 ， 
你 为 了 用 户 在 产品 中 有 一 个 完美 的 体验 而 尽 了 最 大 的 努力 ， 而 最 后 却 想 
欺骗 或 者 强迫 客户 违背 自己 的 意愿 留 在 这 里 ， 这 对 你 没有 帮助 ， 对 客户 
也 没有 帮助 ， 只 会 导致 最 坏 的 口头 宣传 效应 。 客 户 会 在 他 们 的 博客 里 说 































































































(D DropSend 能 让 用 户 发 送 1G 容量 的 超大 尺寸 文件 (普通 E-mail 附件 限于 10M 以 
内 )， 并 提供 文件 在 线 备 份 、 共 享 等 功能 。 但 更 高 级 的 服务 需要 收费 。 网 址 为 http:// 
dropsend.com/。 一 一 译 者 注 

(2 在 Google Reader 推出 以 前 ，Bloglines 可 以 说 是 最 好 、 使 用 人 数 最 多 的 RSS 阅读 
器 ， 但 随后 一 直 未 能 超越 Google Reader。 于 2005 年 被 Ask Jeeves 收购 。 网 址 为 
http://www.bloglines.com/。 译 者 注 

@ OPML 即 “ 大 纲 处 理 标记 语言 ” 也 是 一 种 XML 规范 的 文件 格式 。 它 提供 了 一 种 批 
"RSS 导入 导出 功能 ， 即 可 以 把 多 个 RSS 订阅 地 址 集中 到 一 个 XML 文件 里 面 。 

一 一 译 者 注 
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你 的 坏话 ， 并 且 劝 告 其 他 人 离 你 越 远 越 好 。 
不 过 ， 你 仍然 可 以 做 最 后 一 次 尝试 ， 劝 阻 客户 的 离开 。 


DropSend 的 账户 取消 程序 (当然 只 针对 免费 账户 ) 会 引 疝 一 个 页 国 


你 的 DropSend 账户 不 会 花费 你 的 任何 成 本 …… 


你 确定 真 的 想 取消 吗 ? 这 是 DropSend 的 免费 计划 ， 你 无 需 任 
何 成 本 。 为 什么 不 保留 你 的 账户 ， 以 防 有 一 天 需要 发 送 某 个 大 
文件 ? 或 者 需要 再 次 往 DropSend 里 备份 什么 东西 ? 


如 果 你 的 账户 被 取消 ， 你 所 有 的 文件 都 会 立刻 永久 性 地 删除 。 
这 项 操作 无 法 撤销 ! 


取消 我 的 账户 并 删除 所 有 文件 
回 到 我 的 账户 


这 段 话 非 常客 气 ， 是 一 种 友好 的 语调 ,而 且 可 能 在 一 段 时 间 内 确实 会 收 到 
效果 。 就 如 同 它 所 指出 的 ， 一 个 拥有 免费 账户 的 人 确实 没有 理由 取消 它 ， 
他 完全 可 以 轻松 地 保留 账户 以 防 日 后 需要 。 
另 一 个 选择 是 在 用 户 取消 账户 时 发 送 一 封 最 后 的 电子 邮件 。 里 面 可 以 包 
括 这 样 的 内 容 : 
看 到 你 离 去 我 们 感到 非常 遗憾 ! 我 们 希望 你 在 Acme 相册 中 获 
得 了 良好 的 体验 ， 而 且 希 望 我 们 没有 为 你 带 来 任何 方式 的 冒犯 
或 不 便 。 
如 果 你 原意 给 我 们 最 后 一 次 机 会 ， 我 们 会 非常 乐意 告诉 你 一 些 
我 们 的 新 特性 ， 并 且 为 你 的 所 有 订购 提供 折扣 。 


了 解 新 特性 并 且 接 受 折扣 ! 
但 如 果 你 真 的 准备 离开 我 们 ， 希 望 你 能 花 一 点 时 间 告 诉 我 们 为 





HE 



































什么 。 这 对 我 们 改进 站 点 将 有 莫大 的 帮助 ， 也 许 以 后 还 能 再 次 
夺回 你 的 心 。 


告诉 我 们 哪里 出 了 问题 。 
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感谢 你 一 直 以 来 所 做 的 一 切 。 我 们 非常 感激 ， 而 且 再 次 地 ， 很 
ja Eee 2 离 去 。 真心 祝 你 好 运 。 


不 用 那 种 绝望 般 的 满腹 牢骚， 我 们 可 以 最 后 一 次 请 求 正 要 开门 上 路 的 客 
户 多 去 留 一 段 时 间 并 再 给 我 们 一 次 机 会 ， 而 这 并 不 会 失去 我 们 的 尊严 。 

优雅 的 失败 对 于 Web 应 用 来 说 是 非常 容易 做 到 ， 而 我 们 留 给 客户 的 正面 
印象 将 远 比 失去 客户 所 带 来 的 痛苦 要 来 得 长 入。 如 果 应 对 得 体 ， 哪 怕 是 
一 个 并 不 满意 的 客户 也 能 为 我 们 带 来 积极 的 反馈 ， 甚 至 是 口头 上 的 宣传 。 


而 这 所 需要 的 只 是 在 客户 离开 时 多 表现 出 一 点 敏锐 、 苯 重 和 专业 。 
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在 Designing the 


Obvious 一 书 中 ， 我 
需 的 7 条 核心 原则 ， 以 及 如 何 把 它们 运用 





























到 实际 项 目 

















设计 伟大 的 应 用 








程 


m 只 提供 用 户 所 需 
B 让 初学 者 尽快 转变 为 中 级 用 户 
E 尽 可 能 地 预防 错误 ， 如 出 错 也 应 友 


m 精简 和 优化 交互 与 任务 流程 ， 让 最 复杂 的 软件 清晰 易 信 
B 为 支持 特定 行 


为 而 设计 


厅 , 我 们 需要 








善 处 理 


B 持续 地 改进 和 优化 我 们 的 流程 与 程序 





E 忽略 用 


这 些 原 则 引导 着 我 进行 了 一 个 又 一 个 





"的 某 些 要 求 ， 坚 信 自 
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E 想 和 洞察 力 














述 了 设计 一 款 伟大 的 Web 应 用 所 
PE. Rii, Hi 





的 项 目 ， 证 明和 它们 确实 是 值得 依靠 





的 一 系列 基本 指导 方针 。 通 过 这 些 指 导 方 针 ， 我 们 完全 可 以 实现 极为 易 











Bü, WP 
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大 的 影响 ， 而 其 
能 地 完美 ， 我 们 








只 需 常识 人 

















i 能 有 效 地 使 用 











我 们 的 产品 。 














1 对 的 各 种 








j 在 这 些 宏观 原则 之 外 ， 对 于 Web 应 用 来 说 ， 每 一 位 用 
串 单独 的 瞬间 构成 。 这 些 瞬 让 
的 每 一 个 瞬间 都 需要 精 ， 
也 需要 为 每 天 下 


























cE 


户 的 体验 都 

















司 对 用 户 与 软件 的 联系 和 感知 都 会 产生 重 
设计 。 为 了 让 这 些 瞬 间 尽 可 
体 的 独特 的 设计 问题 找寻 解 


决 办 法 。 所 以 在 本 书 中 ， 我 们 探究 了 30 多 个 微观 原则 ， 它 们 能 帮助 你 解 








决 从 页 














看 布局 到 社区 网 络 交 互 ， 

















可 能 发 生 





一 一 





而 在 所 有 这 些 下 








H 








ing the Obvious 





里 所 讨论 





隐藏 着 一 个 简单 而 又 基本 的 真 到 





的 每 一 个 问题 。 


E。 我 在 本 书 和 















































的 每 





个 原 则 ^ 型 


要 条 件 ， 它 是 任何 设计 项 目的 绝对 核心 : 


Design- 





EE 仿 和 想法 都 深 深 植 根 于 这 个 必 
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设计 即 传达 。 要 想 设计 出 伟大 的 体验 ， 我 们 必须 成 为 伟大 的 传达 者 。 
传达 其 他 所 有 一 切 


贯穿 本 书 始终 ， 我 们 一 直 着 眼 于 改善 各 个 瞬间 。 从 第 一 印象 到 最 终 印 象 ， 
从 拖 放 操作 到 发 布 更 新 ， 它 们 构成 了 用 户 使 用 Web 应 用 所 得 到 的 最 终 体 
验 。 我 们 探究 了 帮助 人 类 与 Web 应 用 交互 的 各 种 原则 和 理念 。 我 们 帮助 
他 们 分 析 、 判 断 、 从 过 失 中 恢复 ， 甚 至 在 他 们 改变 主意 或 者 离 去 之 后 仍 
然 保持 关注 。 我 们 帮助 他 们 获得 时 向、 形成 思路 、 加 深 记忆 、 养 成 习惯 、 
产生 信赖 、 获 得 灵感 ， 并 且 感 觉 自 己 有 成 效 。 


作为 设计 师 ， 我 们 在 设计 每 一 个 交互 时 都 会 面临 各 种 挑战 。 我 们 需要 知 
道人 们 在 网 络 中 是 如 何 交 互 的 ， 是 什么 让 他 们 热爱 或 异 恨 一 季 产 品 。 我 
们 需要 知道 何 时 何 处 应 该 使 用 何 种 设计 思路 、 了 解 最 好 的 实践 方法 和 流 
行 趋势 、 学 习 如 何 更 好 地 表述 。 而 最 重要 的 ， 我 们 还 需要 知道 如 何 让 一 
球 软 件 的 每 一 个 细节 都 容易 理解 ， 这 样 用 户 才 能 实现 他 们 的 目标 ， 而 相 
对 的 ， 我 们 也 能 实现 自己 的 目标 。 


为 了 接受 挑战 ， 设 计 师 在 大 量 的 设计 方法 和 理论 基础 上 加 以 各 种 变化 和 
改进 ， 并 且 提 出 了 无 数 的 设计 文档 、 流 程 图 、 图 表 以 及 其 他 所 有 你 能 想 
象 到 的 资料 ， 力 图 控制 最 终 的 结果 。 


然而 ， 我 们 并 没有 魔法 子弹 能 自动 命中 目标 。 想 让 我 们 的 作品 比 其 他 的 
更 好 ， 这 其 中 也 没有 捷径 。 没 有 哪个 方法 可 以 一 直 遵 循 ， 没 有 完美 的 设 
计 文 档 ， 也 没有 可 以 随时 采集 天 才 想 法 的 魔 树 。 为 了 调整 和 精炼 自己 的 
能 力 以 达到 成 功 ， 我 们 在 前 进 的 过 程 中 可 以 一 百 万 次 地 改变 设计 方法 、 
变换 使 用 的 文件 类 型 ， 或 者 任意 地 进行 其 他 方面 的 改变 。 
而 最 终 ， 它 们 一 点 都 不 重要 。 如 何 才能 得 到 完美 的 设计 一 点 也 不 重要 ， 
因为 这 是 一 个 可 以 重复 的 过 程 。 正 如 刚才 所 说 ， 为 了 调整 和 精炼 自己 的 
能 力 以 达到 成 功 ， 我 们 在 前 进 的 过 程 中 可 以 一 百 万 次 地 改变 设计 方法 、 
变换 使 用 的 文件 类 型 ， 或 者 任意 地 进行 其 他 方面 的 改变 。 

但 不 管 怎样 做 ， 我 们 首要 的 任务 是 传达 ， 而 且 这 一 点 从 未 改变 过 。 

我 们 是 其 他 所 有 一 切 的 传达 者 。 不 管 是 设计 应 用 程序 、 演 示 幻 灯 片 、 设 
计 文 档 ， 还 是 餐馆 里 的 酒 单 ， 我 们 的 目标 永远 是 向 用 户 传 达 它 们 是 如 何 
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工作 的 ， 而 他 们 又 能 从 中 得 到 什么 ， 以 及 为 什么 它们 很 重要 。 
为 了 做 到 这 些 ， 我 们 通过 各 种 设计 手法 、 指 示 性 元 素 以 及 其 他 手段 来 传 














达 一 球 应 用 程序 及 其 交互 行为 的 目的 、 利 益 和 使 用 方法 。 我 们 通过 颜色 、 























户 的 奉献 精神 。 


图 像 和 文字 来 传达 情绪 。 我 们 通过 客户 服务 和 高 质量 的 产品 来 传达 对 用 





























不 管 意识 到 与 否 ， 我 们 无 时 无 刻 都 在 传达 各 种 各 样 的 事物 。 而 如 果 我 们 


传达 得 不 错 ， 就 能 收获 尊 习 





ERR 





然而 ， 如 果 我 们 传达 得 很 糟糕 ， 就 会 收获 相反 的 东西 。 我 们 拿 出 “不 是 
很 优秀 ”的 设计 时 ， 等 于 是 在 向 用 户 传达 我 们 要 么 “不 是 很 有 能 力 ”， 要 


么 “不 是 很 用 心 ”。 











并 且 能 持续 地 发 现价 值 。 








作为 设计 师 ， 我 们 拿 出 的 设计 必须 能 告诉 用 户 ， 我 们 正在 百分之百 
心 让 他 们 快乐 ， 正 在 百分之百 地 用 心 确保 他 们 能 在 我 们 的 产品 中 逗留 




















地 用 

















应 用 本 书 以 及 Designing the Obvious 中 所 讨论 的 原则 ， 将 在 相当 程度 上 大 














助 你 做 到 这 一 点 。 




















最 后 我 们 必须 澄清 这 样 一 个 事实 : 所 谓 “做 出 伟大 的 设计 都 很 艰苦 ”的 
观点 是 一 个 廖 论 。 这 条 廖 论 说 恨 好 的 传达 都 很 难以 实现 ， 还 说 所 谓 的 简 
单 其 实 是 把 复杂 从 用 户 交 互 这 一 前 端 转移 到 了 后 端 。 


做 正确 其 实 更 容易 










































































似乎 有 点 违背 常理 ， 与 错误 的 讯 县 相 比 ， 传 达 正 确 的 讯 县 所 需要 的 思考 
或 精力 反而 会 更 少 。 








让 我 解释 一 下 。 























我 19 岁 时 陪 一 位 朋友 参加 了 一 个 古典 吉他 的 大 师 培 训 班 。 在 这 种 培训 班 





























中 ， 经 验 丰 富 的 大 师 级 音乐 家 会 对 学 生 的 弹 奏 进 行 指正 ， 并 且 提 供 建议 





帮助 他 们 进步 。 
在 我 上 的 这 个 培训 班 里 面 






































细节 ， 令 人 惊异 。 而 我 的 






































， 大 师 是 一 位 经 验 丰 富 而 且 很 著名 的 首 乐 家 ， 














弹 奏 得 非常 棒 。 他 的 吉他 似乎 能 吟唱 出 音乐 里 每 一 个 音符 所 包含 的 情感 











朋友 无 疑 对 自己 可 能 会 受到 批评 而 有 一 些 不 
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不 安 转 变 成 他 手指 反常 的 紧张 。 


大 师 注 意 到 了 这 一 点 。 而 当 他 指正 我 的 朋友 时 ， 说 的 话 我 永远 也 无 法 忘 





记 。 他 说 : 


| “吉他 弹 得 不 好 很 难 ， 弹 好 则 非常 容易 。” 
这 句 话 让 我 非常 困惑 。 儿 年 来 我 一 直 不 知道 他 的 意思 到 底 是 什么 。 他 就 








像 一 个 下 
去 琢磨 其 HH 的 意思 。 





























一样 告诉 了 我 一 些 可 能 了 解 的 最 















































但 是 最 后 ， 因 为 
如 果 一 位 了 
态 。 一 种 融入 的 感觉 。 
非常 平稳 ， 他 的 手指 非常 放松 ， 























处 。 他 并 不 是 在 弹 奏 音 乐 ， 而 是 在 音 




















是 创造 的 音乐 里 面 的 
众 来 说 都 是 如 此 。 

作为 这 种 完美 、 平 静 的 控制 的 结 
并 不 是 勉强 在 每 一 个 小 节 中 





部 分 。 












































奏 出 来 的 音符 一 样 重 要 。 


他 并 不 会 把 自 
多 ， 甚 至 更 多 ， 因 为 在 音乐 里 ， 


打鼓 也 是 一 样 。 



























































还 有 绘画 、 





己 也 打鼓 ， 我 逐渐 开始 到 


己 所 知道 的 一 切 都 强 塞 到 音 


xg 6b sz He 
空白 能 带 来 生命 。 




















乐 中 











图 证 明 自 己 的 灵巧 和 高 超 的 技术 ， 他 知道 那些 没有 弹 奏 的 

































































。 在 页 面 





























人 们 使 用 这 样 的 应 用 程序 ， 远 比 使 


























门 全 塞 进来 要 容易 。 


那些 用 和 肿 的 程序 要 容易 。 





大 的 秘密 ， 


E 解 他 想 说 的 了 。 


吉他 演奏 者 弹 得 很 好 ， 那 是 因为 他 到 达 了 一 种 类 似 禅 的 平静 状 
一 种 高 度 的 集中 。 他 的 手 


aM 











给 我 自己 














尝 非 常 每 展 ， 他 的 呼吸 
并 且 准 备 从 吉他 指 板 的 一 处 流动 到 另 一 
Mt. JE AAT SR, 
这 是 一 种 非常 美妙 的 体验 ， 对 弹 奏 者 和 听 


果 ， 吉 他 弹 奏 者 能 通过 更 少 做 到 更 多 。 
满 音 符 ， 他 能 让 音乐 呼吸 。 并 不 是 一 直 试 





DAL 


Fr fJ 








乐 里 。 他 拿 走 的 和 留 下 的 一 样 








FH SKA 








篮球 ， 还 有 Web 应 用 (以 及 其 他 很 多 东西 )。 
用 儿 句 话 来 描述 一 段 说 明文 字 ， 远 比 写 上 整整 一 大 段 要 容易 。 在 应 
必需 的 内 容 ， 远 比 把 我 们 能 想 
中 留 下 一 些 空白 ， 也 远 比 把 每 个 角 














JFE 





有 到 的 一 切 细 校 末节 都 添加 进去 
落 都 紧 得 满 满 的 要 容 


多 余 的 特 





技术 ， 而 不 是 服务 于 





今天 ， 在 网 络 上 有 许多 关于 可 用 性 的 研究 资料 、 大 量 关 于 设计 方法 和 指 
导 方 针 的 信息 ， 我 们 还 有 各 种 机 会 通过 网 络 社区 和 电子 邮件 获取 专家 建 
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性 、 复 杂 的 交互 还 有 时 旷 的 界面 小 工具 ， 它 们 更 多 地 是 在 炫耀 开 发 者 的 











实际 用 途 。 





























议 。 网 络 的 历史 发 展 到 了 现 阶 段 ， 我 们 无 法 再 为 差劲 的 设计 找到 理 




















做 好 比 做 坏 要 更 加 容 


但 最 重要 的 是 ， 存 在 着 一 个 简单 的 事实 ， 就 像 我 那 位 弹 吉 他 的 朋友 那样 ; 


























5. 





























要 想 取 得 成 功 ， 你 只 需要 留意 自己 要 传达 的 讯号 ， 并 且 充 满 热情 地 去 好 








好 传达 它们 。 结 果 其 








通过 留意 所 要 传达 的 讯 奶 ， 你 的 目标 将 变 成 想 办 法 如 何 只 花 最 少 的 努力 
去 完成 传达 。 通 常 来 说 ， 你 做 得 最 少 的 那 种 方法 其 实 就 是 最 正确 的 解决 





方案 。 


我 希望 在 为 瞬间 而 设计 里 面 所 讲述 的 这 些 故事 能 帮助 
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我 们 每 个 人 都 必须 ] 








他 所 有 一 切 都 会 纷 至 省 来 。 
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ec 


尔 做 到 这 些 。 








开辟 自己 的 道路 ， 去 领会 是 什么 让 我 们 成 为 彼此 不 












































同 的 个 体 。 必 须 了 解 自 己 的 局 限 、 力 量 、 独 特 的 韵 好 以 及 激情 等 。 必 
须 注意 我 们 是 如 何 思考 和 行动 的 、 如 何 与 同事 交往 ， 以 及 如 何 应 对 不 
利 情况 。 必 须 注意 我 们 是 如 何 设计 ， 并 且 找 到 更 好 的 办 法 来 改进 ， 不 
管 这 些 方法 是 来 自 于 研究 、 人 工 观测 还 是 大 量 的 实践 。 还 必须 考虑 我 



























































们 的 环境 、 工 作 所 使 用 的 工具 ， 还 要 了 解 这 些 东西 是 如 何 影响 我 们 的 
能 力 。 最 后 还 必须 留意 我 们 生活 的 各 个 方面 ， 这 样 才 能 为 不 同 的 个 体 


进行 设计 。 

















不 管 你 怎么 做 到 这 些 ， 最 重要 的 是 在 生活 、 工 作 以 及 设计 中 你 一 直 留 意 


着 。 这 样 成 功 才 会 接 中 而 来 。 
再 重申 一 过 ， 好 的 设计 是 








你 第 一 次 尝试 就 能 


























大 堆 差 的 设计 演变 进化 的 结果 。 有 些 时 候 ， 
好 运气 ， 但 大 多 数 时 候 则 不 能 。 这 是 一 条 漫漫 长 路 ， 
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继续 前 进 。 








要 你 坚持 走 下 去 最 终 一 定 会 发 现 自己 一 直 在 寻找 的 东西 。 无 论 如 何 ， 
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这 才 是 我 最 


跟随 你 自己 的 福 社 。 找 到 你 自己 的 禅 。 设 计 属 于 你 自己 的 瞬间 。 
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Tp 





要 的 建议 。 
































米 米 米 米 米 





如 果 和 希望 继续 阅读 我 关于 设计 的 思想 ， 请 访问 我 的 博客 : www.rhjrnet/ 
theblog。 如 果 和 希望 深入 了 解 我 的 公司 Miskeeto， 请 访问 www.miskeeto.com。 


